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>