js仿淘宝侧边栏(学习笔记)

最新推荐文章于 2022-05-08 13:56:59 发布

SpaceX7_s

最新推荐文章于 2022-05-08 13:56:59 发布

阅读量374

点赞数

文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/weixin_45842954/article/details/122150381

版权

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淘宝侧边栏将</title>
    <style>
      * 
          box-sizing: border-box;
      }
        #header {
           
            width: 1000px;
            height: 160px;
            margin: 10px auto;
            background-color: purple;
        }
        #banner {
            width: 1000px;
            height: 500px;
            margin: 10px auto;
          
            background-color: seagreen;
        }
       #navBox {
           
           position: absolute;
           left: 50%;
           top: 300px;
           margin-left: 500px;
           width: 80px;
           height: 200px;
           border: 1px solid #333;
           padding-top: 150px;
           background-color: pink;
       }
       #spanText{
           display: none;
           position: absolute;
           bottom: 0;
       }
        #main {
            width: 1000px;
            height: 1500px;
            margin: 10px auto;
            background-color: slateblue;
        }
    </style>
</head>
<body>
     <div id="header"></div>
     <div id="banner"></div>
     <div id="navBox">
         <span id="spanText">返回顶部</span>
     </div>
    
     <div id="main"></div>
     <script>
        //获取元素
         var navBox = document.querySelector('#navBox');
       
        var banner = document.querySelector('#banner');
        var main = document.querySelector('#main');
        var spanText = document.querySelector('#spanText');
        var bannerTop = banner.offsetTop;
        //获取侧边栏到页面最顶部的距离
        var navTop = navBox.offsetTop;
        //侧边栏停止后需要给它一个距离，否侧会出现回弹的效果
        var stopTop  = navTop - bannerTop;
        //获取main模块到页面顶部的距离
        var mainTop = main.offsetTop;
        //页面滚动事件
        document.addEventListener('scroll',function(){
              //window.pageYOffset浏览器页面在Y轴上卷去的距离
              if(window.pageYOffset >= bannerTop) {
                  navBox.style.position = 'fixed';
                  navBox.style.top = stopTop + 'px';
              } else {
                  navBox.style.position = 'absolute';
                  //绝对定位，并回到它一开始距离页面顶部的距离
                  navBox.style.top = navTop + 'px';
              } 
              //弹出回到顶部的文字
              if(window.pageYOffset >= mainTop){
                    spanText.style.display = 'block';
              } else {
                  spanText.style.display = 'none';
              }

        })
        
     </script>
</body>
</html>

SpaceX7_s

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js仿淘宝侧边栏(学习笔记)

模仿淘宝侧边栏随网页滚动到一定位置开始固定定位思路：把侧边栏通过绝对定位，外边距固定到一个地方，通过获取盒子的setoffHeight值进行判断是否开启固定定位<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="
复制链接

扫一扫