侧边栏及返回顶部

栈老师不回家

已于 2022-10-12 23:15:59 修改

阅读量500

点赞数 1

分类专栏： JavaScript 文章标签： javascript html 前端

于 2022-10-10 16:43:46 首次发布

本文链接：https://blog.csdn.net/m0_52861684/article/details/127247223

版权

JavaScript 专栏收录该内容

18 篇文章 1 订阅

订阅专栏

文章目录

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

1.案例分析

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

2.代码实现

<!--html文档-->
<!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);
        }
    }
})