JS---封装getScroll函数 & 案例：固定导航栏
2024-10-19 18:30:59
封装getScroll函数
1. 获取页面向上或者向左卷曲出去的距离的值
2. 浏览器的滚动事件
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft||0,
top: window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
}
//浏览器的滚动事件
window.onscroll = function () {
console.log(getScroll().top);
};
案例：固定导航栏
获取scrollTop值后判断高度大于导航栏的高，就设置样式固定住，同时，主页部分的marginTop值，为防止浮动/脱标造成的影响，这个值设置为导航栏的高
<!DOCTYPE html>
<html> <head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0
} img {
vertical-align: top;
} .main {
margin: 0 auto;
width: 1000px;
margin-top: 10px; } .fixed {
position: fixed;
top: 0;
left: 0;
}
</style>
</head> <body>
<div class="top" id="topPart">
<img src="data:images/top.png" alt="" />
</div>
<div class="nav" id="navBar">
<img src="data:images/nav.png" alt="" />
</div>
<div class="main" id="mainPart">
<img src="data:images/main.png" alt="" />
</div>
<script src="common.js"></script>
<script> //获取页面向上或者向左卷曲出去的距离的值
function getScroll() {
return {
left: window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0,
top: window.pageXOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
};
} //滑动事件
window.onscroll = function () {
if (getScroll().top >= my$("topPart").offsetHeight) {
//设置第二个div的类样式
my$("navBar").className = "nav fixed";
//设置第三个div的mainTop值
my$("mainPart").style.marginTop = my$("navBar").offsetHeight + "px";
} else {
my$("navBar").className = "nav";
my$("mainPart").style.marginTop = "10px";
}
};
</script> </body> </html>
最新文章
- 前端学HTTP之代理
- ButterKnife Zelezny从配置到使用
- 得静下心来看python了。
- paip.重装系统需要备份的资料总结..v2.0 cad
- hack是什么
- tomcat集群配置
- 学好UI你必须要掌握这些技术
- JavaScript数组方法大全
- Python 3.6.3 利用 Dlib 19.7 和 opencv 实现人脸68点定位 进行人脸识别
- PL/SQL集合 ----- varrays
- C#，一份超简单的数据库帮助类，SqlHelp
- python数据处理excel和pdf，并打包成exe
- PyCharm 使用Github管理Django项目
- 报错：System.Data.Entity.Validation.DbEntityValidationException: 对一个或多个实体的验证失败
- JPA（二）：HellWord工程
- npm 如何设置镜像站为淘宝网
- 转：【HTTP】常见错误码说明
- ibatis源码学习2_初始化和配置文件解析
- python dict 字典
- Linux 中 eclipse 的tomcat端口号被占用