从零到一学JS：写个JS原生导航条每日一kun：最近改掉了熬夜的坏习惯，改通宵了。一天不写JS，浑身难受，搞个导航条，

每日一kun：最近改掉了熬夜的坏习惯，改通宵了。

一天不写JS，浑身难受，搞个导航条，话不多说上代码

JS代码
    var slider = document.querySelector(".slider")
    var mainALL = document.querySelectorAll(".main")
    var span = document.querySelector("span")
    var main = mainALL[0]
    var main02 = mainALL[1]
    var mainTop = main.offsetTop
    var sliderTop = -(mainTop - slider.offsetTop)
    document.addEventListener("scroll", function () {
        if (window.pageYOffset >= mainTop) {
            slider.style.position = "fixed"
            slider.style.top = sliderTop + "px"
        } else {
            slider.style.position = "absolute"
            slider.style.top = "300px"
        }
        if (window.pageYOffset >= main02.offsetTop) {
            span.style.display = "block"
        } else {
            span.style.display = "none"
        }
    })
    span.addEventListener("click", function () {
        location.href = "file://" + location.pathname
    })

HTML代码
    <div class="slider">
        <span>返回顶部</span>
    </div>
    <div class="header">头部</div>
    <div class="main">主体1</div>
    <div class="main">主体2</div>
    <div class="foolter">底部</div>
CSS代码
    .header {
        height: 200px;
        background-color: steelblue;
        margin-top: 10px;
        margin-left: 100px;
        margin-right: 100px;
    }

    .main {
        height: 800px;
        background-color: yellowgreen;
        margin-top: 10px;
        margin-left: 100px;
        margin-right: 100px;
    }

    .foolter {
        height: 200px;
        background-color: silver;
        margin-top: 10px;
        margin-left: 100px;
        margin-right: 100px;
    }

    .slider {
        width: 50px;
        height: 150px;
        right: 60px;
        top: 300px;
        background-color: seagreen;
        position: absolute;

    }

    span {
        position: absolute;
        display: none;
        text-align: center;
        width: 30px;
        top: 20%;
        left: 10%;
    }

从零到一学JS：写个JS原生导航条

每日一kun：最近改掉了熬夜的坏习惯，改通宵了。

一天不写JS，浑身难受，搞个导航条，话不多说上代码

效果图