jquery实现楼层滚动效果

2019-11-19 14:37:08

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了jquery实现楼层滚动效果展示的具体代码，供大家参考，具体内容如下

html:

<!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8">   <title>Document</title>   <link rel="stylesheet" href="css/base.css" rel="external nofollow" >   <style>     #header,#f1,#f2,#f3{       width: 80%;       height: 500px;       background: yellow;       margin-left: 10%;       margin-top: 50px;     }     #f1{       background: green;     }     #f2{       background: red;     }     #f3{       background: blue;     }     #lift{       position: fixed;       top: 280px;       display: none;     }     .lift_btn{       display: inline-block;       width: 50px;       height: 50px;       border: 1px solid #000;     }     .hover{       background: red;     }   </style> </head> <body>   <div id="header"></div>   <div class="floor" id="f1">     <p>第一层</p>   </div>   <div class="floor" id="f2">     <p>第二层</p>   </div>   <div class="floor" id="f3">     <p>第三层</p>   </div>   <div id="lift">     <ul>       <li class="lift_item">         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">           <span>1</span>         </a>       </li>       <li class="lift_item">         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">           <span>2</span>         </a>       </li>       <li class="lift_item">         <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="lift_btn">           <span>3</span>         </a>       </li>     </ul>   </div>    <script src="js/jquery.min.js"></script>   <script src="js/floor.js"></script> </body> </html>

js:

(()=>{   var $lift=$("#lift");   $(window).scroll(()=>{     var scrollTop=$('html,body').scrollTop();     var $f1=$("#f1");     var offsetTop=$f1.offset().top;     if(offsetTop<scrollTop+innerHeight/2)       $lift.fadeIn(500);     else       $lift.fadeOut(500);     var $floors=$(".floor");     $floors.each((i,elem)=>{       var $f=$(elem);       if($f.offset().top<scrollTop+innerHeight/2)         $lift.find(".lift_item:eq("+i+")").addClass("hover").siblings().removeClass("hover");     });   });    $lift.children("ul").on("click","li",function(){     var $li=$(this);     var i=$li.index();     var $fi=$(".floor:eq("+i+")");     var offsetTop=$fi.offset().top;     $("html").animate({       scrollTop:offsetTop-60     },500)   }) })();

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持武林网。

上一篇：jquery实现企业定位式导航效果

下一篇：jquery实现左右轮播切换效果