JQuery webpage navigation effect implementation method, jquery webpage navigation Effect

JQuery webpage navigation effect implementation method, jquery webpage navigation Effect

This article describes how to implement the special effect of jQuery webpage navigation. We will share this with you for your reference. The details are as follows:

Description:The left-side navigation pane is suitable for displaying a large number of page content and clearly dividing blocks. When you click a fixed navigation item on the right, the content on the left is switched. When sliding the scroll bar, the navigation on the right is highlighted and switched with the display on the left.

Ideas:Compare the rolling distance and the floor distance (relative to the top). If the rolling distance is greater than or equal to the floor distance, the corresponding floor is entered, and a variable is used to record the information of the floor, finally, it is highlighted on the right.

1. When you click the fixed navigation item on the right, the content on the left is switched.

You only need to set the href OF a on the right to the id of the block on the left plus #.

2. When sliding the scroll bar, the navigation on the right is highlighted and switched with the display on the left.

The core code is as follows:

$ (Function () {$ (window ). on ("scroll", function (e) {var $ floor =$ ("li [id ^ = floor]"); var $ nav = $ (". mui-lift-nav "); var floorId =" "; var scrollTop = $ (this ). scrollTop (); $ floor. each (function (index, Ele) {// index is the index of each floor, Ele is the dom Element Object of each floor node (this object is a native object, not a jquery object) var offsetTop = $ (Ele ). offset (). top; // Ele encapsulate it. You must add a dollar sign to convert it to the jquery object if (scrollTop> = offsetTop) {floorId = "#" + $ (this ). attr ("id") ;}else {return false ;}}); $ nav. filter ("[href =" + floorId + "]"). addClass ("mui-lift-cur-nav "). siblings (). removeClass ("mui-lift-cur-nav"); // The filter method filters out the desired element if (scrollTop <$ floor. first (). offset (). top | scrollTop> $ floor. last (). offset (). top + $ floor. last (). height () {$ nav. removeClass ("mui-lift-cur-nav ");}});})