Java教程

javascript吸顶导航

本文主要是介绍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>
这篇关于javascript吸顶导航的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航