直播软件搭建，利用原生JS实现回到顶部以及吸顶效果
<style>
.box1{
width: 1200px;
height: 800px;
margin: 0 auto;
}
.box2{
width: 1200px;
height: 800px;
background-color:palegreen;
margin: 0 auto;
}
/* 设置了box1 box2的高度都为800px 是为了页面出现滚动条 */
.gotop {
position: fixed;
bottom: 50px;
right: 5px;
width: 70px;
height: 50px;
text-align: center;
line-height: 50px;
color: #fff;
background-color: aquamarine;
}
/* gotop去顶部 固定定位 定在底部 */
.nav {
width: 1200px;
height: 30px;
background-color: yellow;
position: fixed;
top: 0;
left: 50%;
transform: translate(-50%);
display: none;
}
/* nav头部的导航栏 固定定位 同时让它隐藏 */
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="gotop">回到顶部</div>
<div class="nav"></div>
</body>
<script>
//实现回到顶部效果
var oGo = document.querySelector(".gotop");//获取去顶部的元素
var timer = null;//把定时器置为空
oGo.onclick = function () {//点击事件
clearInterval(timer);//清除定时器
timer = setInterval(function () {
document.documentElement.scrollTop -= 10;//滚动条每次距离顶部的距离减10
var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离
console.log(oSt);
if (oSt === 0) {
clearInterval(timer);//如果距离顶部距离为0 清除定时器
}
}, 20);
}
//实现吸顶效果
window.onscroll = function () {//滚动监听事件
var oNav = document.querySelector(".nav");//获取导航nav里元素
var oSt = document.documentElement.scrollTop;//获取滚动条距离顶部的距离
if (oSt >= 100) {
oNav.style.display = "block";//如果滚动条距离顶部的距离大于100 显示导航nav
} else {
oNav.style.display = "none";//否则不显示
}
}
</script>
思路：
1.回到顶部
1.需要出现滚动条（设置了box1 box2的高度都为800px ，也可以只设置一个盒子，高度设置大一点，出现滚动条即可）。
2.回到顶部的固定定位设置（利用固定定位 定在底部）。
3.设置点击事件onclick（点击回到顶部触发事件）。
4.设置定时器可以改变滚动条距离顶部的距离（还需要进行判断，如果距离顶部距离为0时，要清除定时器，不然会一直调用，占用内存）。
2.吸顶效果
1.利用滚动监听事件 window.onscroll。
2.设置一个nav导航的盒子，固定定位 ，同时让它隐藏。
3.获取滚动条距离顶部的距离,然后进行判断。如果滚动条距离顶部的距离大于100 显示导航nav，否则都是隐藏不显示（这里的高度可以自己设置）。
以上就是直播软件搭建，利用原生JS实现回到顶部以及吸顶效果， 更多内容欢迎关注之后的文章
标签：顶部,oSt,距离,JS,滚动条,直播,nav,吸顶 From： https://www.cnblogs.com/yunbaomengnan/p/17771939.html