JavaScript网页--仿淘宝右侧边栏

Love The Way You Lie 2022-12-29 12:58 188阅读 0赞

# JavaScript网页–仿淘宝右侧边栏 #

在浏览一些网页时，经常会出现右侧边栏，在右侧边栏会有一些比较方便的链接，例如淘宝

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

淘宝的右侧边栏有品质好货，好点直播等链接，在页面向下滚动时，品质好货的上端顶到页面上端时，侧边栏固定，在往下滑，到一定距离后，出现返回顶部的链接。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]

实现了简单的功能（忽略丑陋的页面）  
![在这里插入图片描述][20201222192904646.png]

程序实现如下：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>仿淘宝右侧侧边栏</title>
    
        <style>
            * {
         
                margin: 0px;
                padding: 0px;
            }
            .bd {
         
                width: 1450px;
                height: 5000px;
                margin: auto;
                background-color: pink;
            }
            .slider-bar{
         
                position: absolute;
                width: 50px;
                left: 50%;
                margin-left: 730px;
                top: 700px;
                
            }
            .right {
         
                width: 50px;
                height: 50px;
                font-size: 20px;
                background-color: cadetblue;   
            }
            .goback {
         
                display: none;
                width: 50px;
                height: 50px;
                font-size: 20px;
                background-color: cadetblue;   
            }
    
    
        </style>
    </head>
    <body>
        <div class="bd">
            
        </div>
        <div  class="slider-bar">
            <div class="right">品质好货</div>
            <div class="right">好店直播</div>
            <div class="goback">返回顶部</div>
        </div>
    
        <script>
            var sliderbar = document.querySelector('.slider-bar');
            var goback = document.querySelector('.goback');
            document.addEventListener('scroll',function(){
         
                console.log(window.pageYOffset);
                if(window.pageYOffset >= 400){
         
                    sliderbar.style.position = 'fixed';
                    sliderbar.style.top = '300px';
                }else{
         
                    sliderbar.style.position = 'absolute';
                    sliderbar.style.top = '700px';
                }
                if(window.pageYOffset >= 800){
         
                    goback.style.display='block';
                }else{
         
                    goback.style.display='none'; 
                }
            })
        </script>
    
    </body>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/16ebb45189694a6cb320ad944884c39d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/e9cdf3dc19ea4be1bd4b5d34ee6b611d.png
[20201222192904646.png]: https://img-blog.csdnimg.cn/20201222192904646.png