Front-end Development learning Note four

The day before yesterday to learn the fixed navigation bar based on the page scroll bar distance to automatically locate the effect, its central idea is to determine the current scroll bar value and the corresponding content value in the page to choose the relationship between the size. The JS code is as follows (using the jquery Library):

$ (document). Ready (function() {$ (window). Scroll (function () {                vartop =$ (window). scrolltop (); varMenu = $ ("#menu"); varItems = $ ("#content"). Find (". Item")); //to get the corresponding value when the scroll bar scrolls.                 varCurrentID = ""; //Enables the navigation menu to automatically set the focus when the scroll bar scrollsItems.each (function () {                    varThis = $ ( This); varItemtop =This.offset (). Top; if(Top > itemTop-200) {CurrentID= THIS.ATTR ("id"); } Else {                        return false; }                })                //set current to a corresponding floor, cancel the current of other links                varCurrentlink = Menu.find (". Current")); if(CurrentID && CurrentID! = "#" +currentlink.attr ("href") {Currentlink.removeclass ("Current"); Menu.find ("[href=#" + CurrentID + "]"). AddClass ("current"); }            })        })

Front-end Development learning Note four