当前位置:网站首页>如何利用原生JS实现回到顶部以及吸顶效果
如何利用原生JS实现回到顶部以及吸顶效果
2022-08-10 23:37:00 【争儿不脱发】
<style>
.box1{
width: 1200px;
height: 800px;
background-color: pink;
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,否则都是隐藏不显示(这里的高度可以自己设置)。
重要的知识点
1.window.onscroll 检测滚动条滚动事件。
2.document.documentElement.scrollTop||document.body.scrollTop获取垂直方向滚动的距离。此写法可以兼容火狐和谷歌浏览器。
边栏推荐
猜你喜欢
随机推荐
Kubernetes你不知道的事
点云中的一些名词解释
一文带你了解 ViewModel 的使用及源码解析
开源一夏|OpenHarmony如何选择图片在Image组件上显示(eTS)
如何快速把握行业机会,更高效地推陈出新,是一个重要的命题
[C] the C language program design, dynamic address book (order)
CSAPP lab
15. 拦截器-HandlerInterceptor
9. Rest style request processing
一条SQL查询语句是如何执行的?
App 启动速度优化系列:如何用一个placeholderUI来做初始化工作
8. WEB 开发-静态资源访问
高校就业管理系统设计与实现
ROS Experiment Notes - Validation of UZH-FPV Dataset
5. Lombok
浅析工业互联网
Kubernetes 计算CPU 使用率
DASCTF 2022 7月赋能赛 writeup
App基础优化三部曲:启动原理&黑白屏优化&启动时间优化
如何判断一个数为多少进制?