Hello All.
My first post on here. Hope I get some help from the specialists.
I have a web page with a header strip. It contains the site logo, a
search facility and some html for showing shopping cart summary etc. I
want that as I scroll up/down my page, this strip should scroll along
with me as well. In essence a mobile header strip, like you see in many
sites. See the header strip where the logo and all that is
present:
The html for this all is like:
- <div class="container">
- <div class="row">
- <div class="span12">
- <div class="toprow-1">
- <a
class="swipe-control" href="#">
-
<i class="icon-reorder"></i>
- </a>
-
- <div class="top-search">
-
<i class="icon-search"></i>
- </div>
- </div>
- </div>
- </div>
- <div class="row">
- <div class="span12">
- <div
class="mobilelogo mobivisible">
-
<div class="customer_support">Delivery only
in Kolkata, Minimum Order Amount 1,850.00 INR<br> Customer
Support: +91 9836757590</div>
-
<div id="logo"><a
href="/Home/Home"><img
src="/Images/iconvdv.jpg"
title="VinoDivino.com" width="190px"
height="110px" alt="Vino Divino Home"></a></div>
-
</div>
- <div
id="stickyribbon" top:0px"="">
- <div class="header">
- <div id="logo">
- <a href="/Views/Home/Index">
- <img
src="/Images/iconvdv.jpg"
title="VinoDivino.com" alt="Vino Divino Home"
height="110px" width="190px">
- </a>
-
- </div>
- <div id="search">
- <div class="inner">
- <div class="button-search">
-
-
<input type="text" name="Search"
placeholder="Search" value="">
- <div
class="search_btn"><img
src="/Sliders/srch1.png" height="36px" width="36px"></div>
-
- </div>
- </div>
- </div>
- <div class="cart-position">
- <div class="cart-inner">
- <div
id="cart" class="">
- <div class="heading">
-
<span class="link_a">
-
<img src="/Images/cart_icon.png"
height="26px" width="26px">
-
<b>CART: </b>
-
<span class="sc-button"></span>
-
<span id="cart-total2"></span>
-
<span id="cart-total">
-
0 Item(s)
-
<strong>INR 0.00</strong>
-
</span>
-
<i class="icon-angle-down">
-
<img
id="popdowncart" src="/Images/popdown.jpg"
width="30px" height="30px">
-
</i>
-
<span class="clear"></span>
-
-
</span>
- </div>
- <div class="content">
-
<div class="content-scroll">
-
Your shopping cart is empty!
-
</div>
- </div>
- </div>
- </div>
- </div>
- <div class="clear"></div>
- </div>
-
- </div>
- </div>
- </div>
- <div id="menu-gadget">
- <div class="row">
- <div class="span12">
- <div id="menu-icon">Categories</div>
- <ul
id="nav" class="sf-menu-phone">
-
- </ul>
- </div>
- </div>
- </div>
-
- </div>
There's not much into all that html, basically a div class
'container' -> then class 'row' -> then 'span12'. that's how
it's built. The 'container' is the main parent container for the
strip. I understand, we have to keep altering the css for this strip
dynamically as the document senses a scroll event happening on it to
make the strip move along with the document as I scroll it up/down.
Just haven't got enough ideas to put together the jquery code block
Please help me develop the jQuery for this scrolling header.
Look forward to receiving all the help from you on this
matter.
Thanks in advance.