JS制作~淘宝固定侧边栏

最新推荐文章于 2023-02-23 14:50:21 发布

&Mark&

最新推荐文章于 2023-02-23 14:50:21 发布

阅读量418

点赞数

本文链接：https://blog.csdn.net/qq_64970126/article/details/124647328

版权

javascript 同时被 3 个专栏收录

68 篇文章 4 订阅

订阅专栏

html

16 篇文章 1 订阅

订阅专栏

css

12 篇文章 1 订阅

订阅专栏

淘宝固定侧边栏

<!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>Document</title>
    <script>
        window.addEventListener("load",function(){
           var spanbox=document.querySelector(".spanbox"); 
           var span=document.querySelector("span");
           var banner=document.querySelector(".banner");
           var main=document.querySelector(".main");
           var bannertop=banner.offsetTop;
           var maintop=main.offsetTop;
            var slidetop=spanbox.offsetTop-bannertop;
            console.log(slidetop);
           document.addEventListener('scroll', function() {
                // console.log(11);
                // window.pageYOffset 页面被卷去的头部
                // console.log(window.pageYOffset);
                // 3 .当我们页面被卷去的头部大于等于了 172 此时 侧边栏就要改为固定定位
                // 而且固定定位的top值也应该修改为固定页面中的距离
                // slidetop的数值怎么去获取用spanboxtop减一个高度
                // 我们卷动数值没到bannertop的话就恢复原样
                if (window.pageYOffset >= bannertop) {
                    spanbox.style.position = 'fixed';
                    spanbox.style.top = slidetop + 'px';
                } else {
                    spanbox.style.position = 'absolute';
                    spanbox.style.top = '300px';
                }
                // 4. 当我们页面滚动到main盒子，就显示 goback模块
                if (window.pageYOffset >= mainTop) { 
                    span.style.display = 'block';
                } else {
                    span.style.display = 'none';
                }

            })
            
        })
    </script>
</head>
<body>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .spanbox{
            position:absolute;
            right: 0;
            top: 300px;
            width: 25px;    
            height: 200px;
            background-color: pink;
        }
        span{
            display: none;
        }
        .w{
            width: 1200px;
            margin: 0 auto;
            margin-bottom: 10px;
        }
        .header{
            height: 200px;
            background-color: green;
        }
        .banner{
            height: 400px;
            background-color: blue;
        }
        .main{
            height: 600px;
            background-color: red;
        }
    </style>
    <div class="spanbox">
        <span>返回上一步</span>
    </div>
    <div class="header w"></div>
    <div class="banner w"></div>
    <div class="main w"></div>
</body>
</html>