JQuery Floating navigation menu (shopping site product type)

Single page page content is more, page length is large, need to conveniently and quickly in different locations of the page positioning, so floating menu gradually popular, such as men's, women's wear, beauty and so on.

This menu function is divided into two parts:

1, click menu items, Web page scrolling to the corresponding location, can be easily achieved through the anchor point;

2, when scrolling the page, the selected state of the menu item to change, this need to listen to the Web page scrolling events and through a little calculation to achieve;

Calculates the size relationship of the scrolltop and the offsetTop of each Div, determines where the page is now displayed, and then adds a style to the corresponding menu item based on the result of the calculation. For example, offset () of the second div. top = 300, offset () of the third div. top = 600, ScrollTop = 400 at this point, indicating that most of the display is now the position of the second Div, and 700 is the third Div. The following is a simple example:

<DivID= "Menu">    <ul>        <Li><ahref= "#item1"class= "Current">1F Mens</a></Li>        <Li><ahref= "#item2">2F Women's Clothing</a></Li>        <Li><ahref= "#item3">3F Beauty Makeup</a></Li>        <Li><ahref= "#item4">4F Digital</a></Li>        <Li><ahref= "#item5">5F Mother and Baby</a></Li>    </ul></Div><DivID= "Content">    <H1>Online shopping</H1>    <DivID= "Item1"class= "Item">        <H2>1F Mens</H2>        <ul>            <Li><ahref="#"><imgsrc=""alt=""/></a></Li>            <!--a number of Li -        </ul>    </Div>    <!--a number of item -</Div>

*{margin:0;padding:0;}Body{font-size:12px;Line-height:1.7;}Li{List-style:None;}#content{width:800px;margin:0 Auto;padding:20px;}#content H1{Color:#0088bb;}#content. Item{padding:20px;Margin-bottom:20px;Border:1px dotted #0088bb;}#content. Item H2{font-size:16px;Font-weight:Bold;Border-bottom:2px solid #0088bb;Margin-bottom:10px;}#content. Item Li{Display:inline;Margin-right:10px;}#content. Item Li a img{width:230px;Height:230px;Border:None;}#menu{position:fixed; Left:50%;Margin-left:400px;Top:100px;}#menu ul Li a{Display:Block;margin:5px 0;font-size:14px;Font-weight:Bold;Color:#333;width:80px;Height:50px;Line-height:50px;text-decoration:None;text-align:Center; }#menu ul Li A:hover, #menu ul Li A.current{Color:#fff;background:#0088bb;}

$(function() {$ (window). Scroll (function(){               varScrollTop =$ (document). ScrollTop (); varContentitems = $ ("#content"). Find (". Item")); varCurrentItem = ""; Contentitems.each (function(){                   varContentItem = $ ( This); varOffsetTop =Contentitem.offset (). Top; if(ScrollTop > offsetTop-200) {//the 200 here is self-setting, because if you don't subtract a number, the menu will go wrong when you just scroll to the edge of a div, for example, when the page is just scrolling to the bottom of the first Div, the page already shows a second Div, And the first option in the menu is selectedCurrentItem = "#" + contentitem.attr ("id");               }                                  }); if(currentitem&&currentitem!=$ ("#menu"). Find (". Current"). attr ("href"))){                   $("#menu"). Find (". Current"). Removeclass ("current")); $("#menu"). Find ("[href=" + CurrentItem + "]"). AddClass ("current");       }           }); });

JQuery Floating navigation menu (shopping site product type)