在前端项目的制作中,有一些效果需要是需要javascript来进行控制的,有些项目需求是这样,当顶部的导航移动到某个位置的时候,导航就固定住了,并且样式有的也会发生些许的变化,那么我们如何去实现呢,接下来国瑞前端就来为大家解析一波。
需求分析:
我们首先需要写好样式,然后当页面滚动到固定位置的时候,页面进行变化,导航栏被固定,然后样式发生改变(删除类名和添加类名)
源码如下
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47
| <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>div移动到顶部固定住</title>
<style>
* {
margin:0;
padding:0;
}
</style>
</head>
<body style="height:2000px;">
<div style="height: 200px;"></div>
<div id="navfixed" style="position:relative;top:0;background:#ccc;width:100px; height:100px;width:100%">
导航固定顶部
</div>
<script type="text/javascript">
function menuFixed(id) {
var obj = document.getElementById(id);
// 获取到的dom元素距离顶部的高度
var _getHeight = obj.offsetTop;
window.onscroll = function () {
// 滚动传入id和距离
changePos(id, _getHeight);
}
}
//判断高度是否达到固定点
function changePos(id, height) {
var obj = document.getElementById(id);
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop < height) {
obj.style.position = 'relative';
} else {
obj.style.position = 'fixed';
}
}
//开局加载
window.onload = function () {
menuFixed('navfixed');
}
</script>
</body> |
「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」
共 0 条评论关于"js滚动导航固定顶部"
最新评论