How to realize the floor scrolling effect with jquery
Most people do not understand the knowledge points of this article "jquery how to achieve floor scrolling effects", so the editor summarizes the following contents, 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 floor rolling effects in jquery" article.
Effect picture
Html
1F clothing 2F Beauty make-up 3F Mobile phone 4F Home Appliances 5F Digital 6F Sports 7F Home 8F Mother and Infant 9F Food 10F Books 11F Service clothing Beauty make-up Mobile Appliances Digital Sports Home Mother and Child Food Book Service
Css
Body, ul, li {padding: 0; margin: 0;} li {list-style: none;} # floorNav {display: none; position: fixed; top: 100px; left: 50px; width: 32px; border: 1px solid # cecece;} # floorNav li {position: relative; width: 32px; height: 32px Border-bottom: 1px solid # cecece; text-align: center; line-height: 32px; font-size: 12px;} # floorNav span {display: none; position: absolute; top: 0; left: 0; width: 32px; height: 32px; background: red; color: white;} # floorNav li:hover span, # floorNav li.hover span {display: block Cursor: default;} # floorNav li:last-child {border-bottom: none;} # header, # footer {width: 1000px; height: 1000px; background: darkgoldenrod; margin: 0 auto;} # content li {width: 1000px; height: 600px; margin: 0 auto; font-size: 40px; text-align: center; line-height: 600px;}
Js
Function () {if (flag) {var t = $(this) .scrollTop (); if (t > 500) {$("# floorNav") .fadeIn ();} else {$("# floorNav") .fadeOut () } $("# content li") .each (function () {if (t > = $(this). Offset (). Top-$(this). OuterHeight () / 2) {var index = $(this). Index () $("# floorNav li") .eq (index) .addClass ("hover") .siblings () .removeClass ("hover");});}}); $("# floorNav li") .click (function () {flag = false) Var index = $(this) .index (); $("html,body") .animate ({scrollTop: $("# content li") .eq (index) .offset () .top,}, () = > {flag = true;}); $(this) .addClass ("hover") .siblings () .removeClass ("hover") The above is about the content of this article on "how to achieve floor scrolling effects in jquery". I believe we all have some 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.
