How to realize the Special effect of Elevator Navigation by JQuery
The knowledge of this article "how to achieve elevator navigation special effects in JQuery" is not quite understood by most people, so the editor summarizes the following content, detailed content, clear steps, and has a certain reference value. I hope you can gain something after reading this article. Let's take a look at this "how to achieve elevator navigation special effects in JQuery" article.
The effect is as follows:
The following is the code implementation:
Implement elevator navigation special effects based on JQuery * {margin: 0; padding: 0; font-family: 'microsoft yahei';} # loutinav {width: 35px; position: fixed; top: 100px; left: 50px; border: 1px solid # ddd; display: none } # loutinav ul li {width: 35px; height: 32px; border-bottom: 1px dotted # DDDDDD; list-style: none; font-size: 12px; text-align: center; position: relative; cursor: pointer; padding: 10px 0; background: # 918888 Color: # fff;} # loutinav ul li span {width: 35px; height: 32px; padding: 10px 0; position: absolute; top: 0; left: 0;} # loutinav ul li.last {background: # 5e4a4a; color: # fff Border-bottom: 1px solid # ddd;} # loutinav ul li.active span {background: # c00; color: # fff; display: block;} # loutinav ul li:hover span {background: # c00; color: # fff; display: block } # header {width: 1000px; height: 1000px; background: # cc6633; margin: 0 auto; font-size: 50px; line-height: 1000px; text-align: center; color: # 000;} # main {width: 1000px Background: # 66ff66; margin: 0 auto;} # main .lody {height: 600px; width: 1000px; font-size: 50px; color: # fff; font-weight: bold; text-align: center; line-height: 600px } # footer {width: 1000px; height: 400px; background: red; margin: 0 auto; font-size: 50px; line-height: 400px; text-align: center; color: # 000 } enjoy quality clothing, make-up, computer, digital 3C sports Love to eat mother and baby home books, car virtual not enough to go to the top Scroll down the mouse to view the effect of enjoying quality clothing, beauty makeup, computer digital 3C sports, love to eat, mother and baby at home The virtual book car hasn't done enough shopping at the bottom of the website $(function () {$_ (window) .on ('scroll') Function () {var $scroll = $(this) .scrollTop () / / display the floor label if ($scroll > = 800) {$('# loutinav') .show ();} else {$('# loutinav') .hide () } / / drag the scroll wheel to illuminate the corresponding floor label $('.lours') .each (function () {var $loutitop = $('.lout'). Eq ($(this). Index ()). Offset (). Top + 400 / / the top of the floor is greater than the distance of the scroll bar if ($loutitop > $scroll) {$('# loutinav li'). RemoveClass ('active'); $(' # loutinav li'). Eq ($(this). Index ()) .addClass ('active') / / break the loop return false;}});}) / / get the offset () .top of each staircase, click the floor to move the corresponding content module to the corresponding location var $loutili = $('# loutinav li'). Not ('.last'); $loutili.on ('click', function () {$(this) .addClass (' active'). Siblings ('li'). RemoveClass (' active')) Var $loutitop = $('.lody') .eq ($(this) .index ()) .offset () .top / / get the offsettop value of each staircase / / $('html,body') compatibility problem body belongs to chrome $(' html,body'). Animate ({scrollTop: $loutitop})}) / / back to the top $('.last') .on ('click', function () {/ / $(' html,body') compatibility problem body belongs to chrome $('html,body') .animate ({scrollTop: 0})}) }) the above is the content of this article on "how to achieve elevator navigation special effects in JQuery". I believe we all have a certain understanding. I hope the content shared by the editor will be helpful to you. If you want to know more about the relevant knowledge, please follow the industry information channel.
