Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge about how to use scrolling monitoring to achieve mall staircase navigation effect in jQuery. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Partial effect drawing:

Html structure, left positioning navigation needs a ul, middle content, I directly capture the picture, for the effect to save trouble, also use ul, finally, you can also use ul, or div, but each area has to be a div, for example, select a div, women's wear put a div, all areas are nested in a large div, that is, similar to ul > li structure (only provide html structure and jQuery structure If the style is based on the design draft):

 selection  women's wear  shoes bag  men's  sports  accessories  selection  women's wear  shoes bags  men's  sports  accessories 

Var offon = true; $(window) .scroll (function () {/ / scrolling browser will execute if (offon) {/ / get scroll height var _ top = $(window). ScrollTop (); if (_ top > 150) {$('.menu'). Show ();} else {$('.menu'). Hide ();} $('.main ul li') .each (function (I) {/ / get the current subscript var _ index = $(this). Index (); var _ height = $(this). Offset (). Top+500;// gets the upper offset value if (_ height > _ top) {/ / priority principle $(' .menu ul li'). Eq (_ index) .addClass ('on'). Siblings (). RemoveClass (' on'); return false / / Pop-out traversal};});};}); $('.menu ul li') .click (function () {offon = false; var _ index = $(this) .index (); $(this) .addClass (' on'). Siblings (). RemoveClass ('on'); var _ height = $(' .main ul li'). Eq (_ index). Offset (). Top / / get the upper offset value $('body,html'). Animate ({scrollTop:_height}, 500 offon function () {offon = true;});}). This is all the content of the article "how to use scrolling monitoring in jQuery to achieve mall staircase navigation effect". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.