jquery怎么实现楼层滚动特效

这篇“jquery怎么实现楼层滚动特效”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“jquery怎么实现楼层滚动特效”文章吧。

效果图

html

<div id="floorNav">     <ul>       <li>1F<span>服饰</span></li>       <li>2F<span>美妆</span></li>       <li>3F<span>手机</span></li>       <li>4F<span>家电</span></li>       <li>5F<span>数码</span></li>       <li>6F<span>运动</span></li>       <li>7F<span>居家</span></li>       <li>8F<span>母婴</span></li>       <li>9F<span>食品</span></li>       <li>10F<span>图书</span></li>       <li>11F<span>服务</span></li>     </ul>   </div>   <div id="header"></div>   <div id="content">     <ul>       <li >服饰</li>       <li >美妆</li>       <li >手机</li>       <li >家电</li>       <li >数码</li>       <li >运动</li>       <li >居家</li>       <li >母婴</li>       <li >食品</li>       <li >图书</li>       <li >服务</li>     </ul> </div>

css

<style type="text/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;     } </style>

js

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>   <script type="text/javascript">     $(function () {       var flag = true;       $(window).scroll(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");       });     }); </script>

以上就是关于“jquery怎么实现楼层滚动特效”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注亿速云行业资讯频道。