直播平台开发，利用原生JS实现回到顶部以及吸顶效果

 <style><br>        .box1{<br>            width: 1200px;<br>            height: 800px;<br>            <br>            margin: 0 auto;<br>        }<br>        .box2{<br>            width: 1200px;<br>            height: 800px;<br>            background-color:palegreen;<br>            margin: 0 auto;<br>        }<br>        /* 设置了box1 box2的高度都为800px 是为了页面出现滚动条 */<br>        .gotop {<br>            position: fixed;<br>            bottom: 50px;<br>            right: 5px;<br>            width: 70px;<br>            height: 50px;<br>            text-align: center;<br>            line-height: 50px;<br>            color: #fff;<br>            background-color: aquamarine;<br>        }<br>        /* gotop去顶部 固定定位 定在底部  */<br> <br>        .nav {<br>            width: 1200px;<br>            height: 30px;<br>            background-color: yellow;<br>            position: fixed;<br>            top: 0;<br>            left: 50%;<br>            transform: translate(-50%);<br>            display: none;<br>        }<br>        /* nav头部的导航栏 固定定位 同时让它隐藏 */<br>    </style><br></head><br><body><br>    <div class="box1"></div><br>    <div class="box2"></div><br>    <div class="gotop">回到顶部</div><br>    <div class="nav"></div><br></body><br><script><br>    //实现回到顶部效果<br>    var oGo = document.querySelector(".gotop");//获取去顶部的元素<br>    var timer = null;//把定时器置为空<br>    oGo.onclick = function () {//点击事件 <br>        clearInterval(timer);//清除定时器<br>        timer = setInterval(function () {<br>            document.documentElement.scrollTop -= 10;//滚动条每次距离顶部的距离减10<br>            var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离<br>            console.log(oSt);<br>            if (oSt === 0) {<br>                clearInterval(timer);//如果距离顶部距离为0 清除定时器<br>            }<br>        }, 20);<br>    }<br>    //实现吸顶效果<br>    window.onscroll = function () {//滚动监听事件<br>        var oNav = document.querySelector(".nav");//获取导航nav里元素<br>        var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离<br>        if (oSt >= 100) {<br>            oNav.style.display = "block";//如果滚动条距离顶部的距离大于100 显示导航nav<br>        } else {<br>            oNav.style.display = "none";//否则不显示<br>        }<br>    }<br></script>