于滑动滚动条的效果

关于滑动滚动条的效果

实现效果：下拉滚动条时，上面的会有进度条，页面到底上部的滚动条也会到头；
首先先写个基本布局：

 <style>
        * {
            margin: 0;
            padding: 0;
        }

        .progressbar {
            height: 3px;
            background: skyblue;
            position: fixed;
            top: 0;
            left: 0;
            width: 30%;
            z-index: 1;
        }
    </style>

  <div class="progressbar"></div>
    <div style="height: 500px;"></div>
    <div class="demo" style="height:100px;background:#000;top:0;width:100%"></div>
    <div style="height:2000px">
    </div>

写一下js的效果：

 <script>
        let demo = document.querySelector('.demo')
        let offsetTop = demo.offsetTop

        window.onscroll = () => {
            let scrollTop = Math.floor(document.documentElement.scrollTop)
            let maxScrollTop = document.body.offsetHeight - window.innerHeight
            let percent = (scrollTop * 100 / maxScrollTop) + '%'
            document.querySelector('.progressbar').style.width = percent

            if (scrollTop > offsetTop) {
                demo.style.position = 'fixed'
            } else {
                demo.style.position = 'static'
            }

        }
    </script>

当上在上面的代码中还有一个效果就是，本来在下面的黑色模块，在滚动条向下滚动的过程中，滚动到一定的位置时会固定到顶部。