jquery實現仿京東側邊欄

本文轉載自查看原文 2018-01-01 19:05 1578

  1 <!DOCTYPE html>
  2 <html>
  3 <head lang="en">
  4     <meta charset="UTF-8">
  5     <title>仿京東側邊欄</title>
  6     <style type="text/css">
  7         *{
  8             margin:0;padding:0;
  9         }
 10         ul{list-style: none;}
 11         .top,.dian,.jia,.fu,.mei,.bottom{
 12             width: 1210px;
 13             margin: 0 auto;
 14         }
 15         .subnav
 16         {
 17             position: fixed;
 18             width: 38px;
 19             height: 200px;
 20             top:200px;
 21             left:50%;
 22             margin-left:605px;
 23             /*display: none;*/
 24         }
 25         .subnav li{
 26             height: 36px;
 27             border:1px solid #DEDEDE;
 28             margin-bottom: 5px;
 29             font-size:0;
 30             background: url(bg.png) no-repeat;
 31         }
 32         .subnav li:hover,.subnav li.current,.back
 33         {
 34             border:1px solid #ED5759;
 35             background: #FDEEEE;   /* 只有沖突的時候才會出現層疊 */
 36             /* 背景顏色 背景圖片 背景位置 背景平鋪  背景固定 */
 37             /* css 層疊樣式表 */
 38             font-size:12px;
 39             color: #ED5759;
 40             padding-left: 6px;
 41             padding-top: 2px;
 42             height: 34px;
 43             cursor: pointer;
 44         }
 45     </style>
 46     <script type="text/javascript" src="jquery-1.11.1.min.js"></script>
 47     <script type="text/javascript">
 48 //     1.先找到響應的小圖標；
 49 //     2.先讓頁面滾動的時候，滾動到響應的小圖標那里；
 50 //     3.設置點擊事件
 51         $(function(){
 52             var $menu=$('.subnav');
 53             var $list=$('.subnav li');
 54             var top=0;
 55             var num=0;
 56            $list.each(function(index,ele){
 57                var num=index*55;
 58                $list.css({
 59                   "background-position":0,num
 60                });
 61            });
 62             $(window).scroll(function(){
 63                 var top=$(document).scrollTop();
 64                 if(top> $('.mei').offset().top){
 65                     $list.eq(3).addClass('current').siblings().removeClass();
 66                 }else if(top> $('.fu').offset().top){
 67                     $list.eq(2).addClass('current').siblings().removeClass();
 68                 } else if(top>= $(".jia").offset().top){
 69                     $list.eq(1).addClass("current").siblings().removeClass();
 70                 } else if(top >= $(".dian").offset().top){
 71                     $list.eq(0).addClass("current").siblings().removeClass();
 72                 }else if(top>0){
 73                     $menu.fadeIn();
 74                 }else{
 75                     $menu.fadeOut();
 76                 }
 77             });
 78             $list.click(function(){
 79                 $('html,body').stop().animate({
 80                     'scrollTop':$('.jd').eq($(this).index()).offset().top
 81                 },1000);
 82             });
 83             $('.back').click(function(){
 84                 $('html,body').animate({
 85                     'scrollTop':0
 86                 },300);
 87             })
 88         })
 89     </script>
 90 </head>
 91 <body>
 92 <div class="top">
 93     <img src="top.png" alt="" />
 94 </div>
 95 <div class="jd dian">
 96     <img src="dian.png" alt="" />
 97 </div>
 98 <div class="jd jia">
 99     <img src="jia.png" alt="" />
100 </div>
101 <div class="jd fu">
102     <img src="fu.png" alt="" />
103 </div>
104 <div class="jd mei">
105     <img src="mei.png" alt="" />
106 </div>
107 <div class="bottom">
108     <img src="bottom.png" alt="" />
109 </div>
110 <div class="subnav">
111     <ul>
112         <li>電腦數碼</li>
113         <li>家電通訊</li>
114         <li>服飾精品</li>
115         <li>美容珠寶</li>
116     </ul>
117     <div class="back">返回</div>
118 </div>
119 </body>
120 </html>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery實際案例⑤——仿京東側邊欄（樓層） Android實現仿qq側邊欄效果 jQuery Sidebar 側邊欄 jquery隱藏側邊欄和折疊側邊欄方法 JS側邊欄實現 AdminLTE3動態側邊欄實現 android DrawerLayout 側邊欄實現案例：仿淘寶固定右側側邊欄的功能 js實現上下滑動側邊欄側邊欄導航