css和javascript让导航跟随窗口一起滚动

2015-09-14 15:15:54
开发
30
shevechco

制作前端页面效果的时候我们经常需要导航一直紧贴浏览器上面窗口，这样可以让我们下拉到哪里都可以随时看到导航菜单并点击，今天这里给大家两种实现的方法

1.css实现

.nav{width:100%;height:36px;position: fixed;z-index:99999;}

直接使用position属性，值设置为fixed，这样导航就能一直紧贴窗口上面，z-index是防止其他层遮挡而设置的非常大

2.javasciprt实现

<script>
$(window).scroll(function(){
	var Ntop = $(".nav").offset().top;
	var Htop = $(window).scrollTop();
	if(Htop > Ntop){
		$(".nav").addClass("on");
	}else{
		$(".nav").removeClass("on");
	}
})
</script>

还需要添加一条class选择器来附加效果

.on{
	position:fixed;
	top:0;
}

标签

css
javascript

转载注明出处：http://www.sulao.cn/post/111

css和javascript让导航跟随窗口一起滚动

相关推荐