javascript吸顶导航

效果图

思路
1.被卷曲的部分大于紫色的高度就脱离文档流，否则恢复文档流

*{
				margin: 0;
				padding: 0;
			}
			.wrap{
				width: 100%;
				height: 1500px;
				position: relative;
			}
			.top{
				width: 100%;
				height: 300px;
				background: #008000;
			}
			.nav{
				width: 100%;
				height: 100px;
				background: #ff55ff;	
			}
			.content{
				width: 100%;
				height: 1000px;
				background: #ffaa00;
			}
			#active{
				position: fixed;
				left: 0px;
				top: 0px;
			}

		window.onscroll=function(){
		var nav=document.querySelector('.nav');
		var top=document.querySelector('.top');
		var navTop=document.documentElement.scrollTop||document.body.scrollTop;
		
		// 固定
		if(navTop>=top.offsetHeight){
			nav.setAttribute('id','active');
		}
		// 恢复文档流
		else{
			nav.removeAttribute('id')
		}
	}

<div class="wrap">
	<div class="top"></div>
	<div class="nav"></div>
	<div class="content"></div>
</div>

标签：吸顶,top,javascript,height,width,nav,document,导航,100%
来源： https://blog.csdn.net/qq_46065861/article/details/120137555