The jQuery floating navigation menu is suitable for shopping products.
The content of a single page is large, and the page length is large, so it is convenient to quickly locate the page in different locations. As a result, floating menus are becoming popular, such as men's wear, women's wear, and beauty.
This menu function is divided into two parts:
1. Click the menu item and scroll the webpage to the corresponding position, which can be implemented simply by the anchor;
2. When scrolling the page, the selected menu item status should change accordingly. This requires listening to the page rolling events and performing some calculations;
Calculate the relationship between scrollTop and offsetTop of each div, determine where the current webpage is displayed, and add a style to the corresponding menu item based on the calculation result. For example, the offset () of the second div (). top = 300, the offset () of the third div (). top = 600, scrollTop = 400 at this time, indicating that most of the displayed position is the second div, and 700 is the third div. The following is a simple example:
<Div id = "menu"> <ul> <li> <a href = "# item1" class = "current"> 1F men's wear </a> </li> <li> <a href = "# item2"> 2F women's clothing </a> </li> <a href = "# item3"> 3F makeup </a> </ li> <a href = "# item4"> 4F digital </a> </li> <a href = "# item5"> 5F maternal and child </ a> </li> </ul> </div> <div id = "content">
* {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 () {var scrollTop = $ (document ). scrollTop (); var contentItems =$ ("# content "). find (". item "); var currentItem =" "; contentItems. each (function () {var contentItem = $ (this); var offsetTop = contentItem. offset (). top; if (scrollTop> offsetTop-200) {// here 200 is set based on the actual situation, because if you do not subtract a value, just scroll to the edge of a div, an error occurs when the menu is selected. For example, when the page just scrolls to the bottom of the first div, the second div is displayed on the page, currentItem =" # "+ ContentItem. attr (" id ") ;}}); if (currentItem & currentItem! = $ ("# Menu "). find (". current "). attr ("href") {$ ("# menu "). find (". current "). removeClass ("current"); $ ("# menu "). find ("[href =" + currentItem + "]"). addClass ("current ");}});});
How does jquery control the navigation menu of the current page?
For example, the <div class = "nav"> <a href = "index.html"> homepage </a> <a href = "product.html"> product </a>
The following html content:
<Div class = "main">
<Div class = "content"> homepage content </div>
<Div class = "content"> product content </div>
<Div class = "content"> case center content </div>
</Div>
As for class = "content", you can add it yourself to facilitate jQuery's acquisition, without this style class.
<Script type = "text/javascript">
$ (Document). ready (function ()
{
Var tabs =$ ('. nav> ');
Var cons = $ ('. main> div. content ');
Tabs. first (). addClass ("now"). show (); // The first display by default
Cons. first (). show (). nextAll (). hide (); // The first display is displayed by default, and others are hidden.
Tabs. each (function (index ){
$ (This). mouseover (function (){
$ (This). addClass ("now"). siblings (). removeClass ("now ");
Cons. eq (index). show (). siblings (). hide ();
});
});
});
</Script>
For JQuery header navigation floating plug-ins
There should be no ready-made plug-ins.
You can add position: fixed; left: 0; top: 0 to the css of your head navigation !~
Of course, this is always in the upper left corner of the browser
You can use
$ (Window). scroll (function (){
If ($ (document). scrollTop ()> 300) // checks whether the scroll bar has scrolled PX.
$ ("Your navigation bar"). show ();
Else
$ ("Your navigation bar"). hide ();
});