侧边栏及返回顶部

悠悠 2023-09-26 10:59 21阅读 0赞

#### 文章目录 ####

*   *  1.案例分析
     *  2.代码实现

### 1.案例分析 ###

① 原先侧边栏是绝对定位；  
② 当页面滚动到一定位置时，侧边栏改为固定定位；  
③ 页面继续滚动，会出现返回顶部模块；  
④ 需要用到页面滚动事件 scroll，因为是页面滚动，所以事件源是 document；  
⑤ 滚到什么位置停下？通过判断页面被卷去的上部值来确定；  
⑥ 注意元素被卷去的头部通过 element.scrollTop 获得，而页面被卷去的头部则是 window.pageYOffset；  
⑦ 返回顶部，即滚动窗口至文档中的特定位置**window.scroll(x, y)**，注意里面的参数不跟单位；  
⑧ 为了在返回顶部的时候看起来更柔和一点，我们需要用到动画函数，使页面稍缓慢地滚动。

### 2.代码实现 ###

<!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">
        <script src="固定侧边栏.js"></script>
        <title>Document</title>
        <style>
            * {
         
                margin: 0;
                padding: 0;
            }
            .content {
         
                width: 500px;
                height: 3000px;
            }
            .big {
         
                position: absolute;
                width: 50px;
                height: 250px;
                right: 45px;
                top: 400px; 
            }
            .small1 {
         
                width: 100%;
                height: 50px;
                background-color: brown;
            }
            .small2 {
         
                width: 100%;
                height: 50px;
                background-color: rgb(53, 211, 39);
            }
            .small3 {
         
                width: 100%;
                height: 50px;
                background-color: rgb(119, 77, 233);
            }
            .small4 {
         
                width: 100%;
                height: 50px;
                background-color: rgb(205, 232, 56);
            }
            .back-top {
         
                display: none;
                width: 100%;
                height: 50px;
                background-color: rgb(240, 140, 11);
            }
        </style>
    </head>
    <body>
        <div class="content"></div>
        <div class="big">
            <div class="small1">特色</div>
            <div class="small2">喜欢</div>
            <div class="small3">反馈</div>
            <div class="small4">举报</div>
            <div class="back-top">顶部</div>
        </div>
    </body>
    </html>

//js文档
    window.addEventListener('load', function() {
        
        var big = document.querySelector('.big');
        var backtop = document.querySelector('.back-top');
        var fixedTop = big.offsetTop - 300;
        document.addEventListener('scroll', function() {
        
            //1.滚动到一定位置时固定不动
            if (window.pageYOffset > 300) {
        
                big.style.position = 'fixed';
                big.style.top = fixedTop + 'px';
            } else {
        
                big.style.position = 'absolute';
                big.style.top = '400px';
            }
            //2.滚动到一定位置时显示返回顶部
            if (window.pageYOffset > 500) {
        
                backtop.style.display = 'block';
            } else {
        
                backtop.style.display = 'none';
            }
        })
        backtop.addEventListener('click', function() {
        
            animate(window, 0);
        })
        function animate(obj, target, callback) {
        
            clearInterval(obj.timer); 
            obj.timer = setInterval(fn, 13);
            function fn() {
        
                var step = (target - window.pageYOffset) / 10;
                step = step > 0 ? Math.ceil(step) : Math.floor(step);
                if (window.pageYOffset == target) {
        
                    clearInterval(obj.timer);
                    if (callback) {
        
                        callback();
                    }
                }
                window.scroll(0, window.pageYOffset + step);
            }
        }
    })

运行结果：  
![在这里插入图片描述][521fe0f724bf4f3aa99b71b2d4154e96.png_pic_center]

[521fe0f724bf4f3aa99b71b2d4154e96.png_pic_center]: https://img-blog.csdnimg.cn/521fe0f724bf4f3aa99b71b2d4154e96.png#pic_center