JS实现菜单滚动到一定高度后固定

Posted 小蓉儿

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS实现菜单滚动到一定高度后固定相关的知识,希望对你有一定的参考价值。

在有些网页中我们会发现会有这样的现象:某个div会随着屏幕的滚动达到一定高度的时候位置就固定下来了。例如一下导航条:

那么这里就需要用到JS的逻辑方法来实现了。

html

<div id="space"></div>
<ul id="nav"> 
   <li><a href="#content1">美食</a></li> 
   <li><a href="#content2">娱乐</a></li> 
   <li><a href="#content3">超市</a></li> 
   <li><a href="#content4">出行</a></li> 
   <li><a href="#content5">养车</a></li> 
</ul> 
<div id="content1">内容区域一</div>
<div id="content2">内容区域二</div>
<div id="content3">内容区域三</div>
<div id="content4">内容区域四</div>
<div id="content5">内容区域五</div>

js

<script type="text/javascript">
	window.onscroll=function(){
	    var topScroll =document.body.scrollTop || document.documentElement.scrollTop;//滚动的距离,距离顶部的距离
		console.log(topScroll,\'topScroll\')
		var space  = document.getElementById("space");
		var bignav  = document.getElementById("nav");//获取到导航栏id
		var spaceOffsetHeight = space.offsetTop    //以spce的滚动高度为参照
		console.log(spaceOffsetHeight,\'navOffsetHeight\')
		if(topScroll > spaceOffsetHeight){  
			bignav.style.position = \'fixed\';
			bignav.style.top = \'0\';
			bignav.style.zIndex = \'9999\';
		} else {
			bignav.style.position = \'static\';
		}
	}
</script>

以上是关于JS实现菜单滚动到一定高度后固定的主要内容,如果未能解决你的问题,请参考以下文章

当滚动页面到一定程度时,页顶菜单浮动固定在页面顶部

js吸顶效果与布局

BootStrap有用代码片段(持续总结)

JS实例之滚动固定效果,实现顶部菜单固定效果。

前端技术 -- 页面滚动条到一定高度后出现置顶按钮

重写移动端滚动条[iScroll.js核心代码]