js仿淘宝侧边栏

模仿淘宝侧边栏随网页滚动到一定位置开始固定定位
思路：把侧边栏通过绝对定位，外边距固定到一个地方，通过获取盒子的setoffHeight值进行判断是否开启固定定位

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <title>淘宝侧边栏将</title>
 8     <style>
 9       * 
10           box-sizing: border-box;
11       }
12         #header {
13            
14             width: 1000px;
15             height: 160px;
16             margin: 10px auto;
17             background-color: purple;
18         }
19         #banner {
20             width: 1000px;
21             height: 500px;
22             margin: 10px auto;
23           
24             background-color: seagreen;
25         }
26        #navBox {
27            
28            position: absolute;
29            left: 50%;
30            top: 300px;
31            margin-left: 500px;
32            width: 80px;
33            height: 200px;
34            border: 1px solid #333;
35            padding-top: 150px;
36            background-color: pink;
37        }
38        #spanText{
39            display: none;
40            position: absolute;
41            bottom: 0;
42        }
43         #main {
44             width: 1000px;
45             height: 1500px;
46             margin: 10px auto;
47             background-color: slateblue;
48         }
49     </style>
50 </head>
51 <body>
52      <div id="header"></div>
53      <div id="banner"></div>
54      <div id="navBox">
55          <span id="spanText">返回顶部</span>
56      </div>
57     
58      <div id="main"></div>
59      <script>
60         //获取元素
61          var navBox = document.querySelector('#navBox');
62        
63         var banner = document.querySelector('#banner');
64         var main = document.querySelector('#main');
65         var spanText = document.querySelector('#spanText');
66         var bannerTop = banner.offsetTop;
67         //获取侧边栏到页面最顶部的距离
68         var navTop = navBox.offsetTop;
69         //侧边栏停止后需要给它一个距离，否侧会出现回弹的效果
70         var stopTop  = navTop - bannerTop;
71         //获取main模块到页面顶部的距离
72         var mainTop = main.offsetTop;
73         //页面滚动事件
74         document.addEventListener('scroll',function(){
75               //window.pageYOffset浏览器页面在Y轴上卷去的距离
76               if(window.pageYOffset >= bannerTop) {
77                   navBox.style.position = 'fixed';
78                   navBox.style.top = stopTop + 'px';
79               } else {
80                   navBox.style.position = 'absolute';
81                   //绝对定位，并回到它一开始距离页面顶部的距离
82                   navBox.style.top = navTop + 'px';
83               } 
84               //弹出回到顶部的文字
85               if(window.pageYOffset >= mainTop){
86                     spanText.style.display = 'block';
87               } else {
88                   spanText.style.display = 'none';
89               }
90 
91         })
92         
93      </script>
94 </body>
95 </html>

 

posted @ 2021-12-26 13:40  粥周  阅读(113)  评论(0)    收藏  举报