苏老的学习笔记 - css和javascript让导航跟随窗口一起滚动

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

发布于2015-09-14 15:15:54 更新于2015-09-14 15:15:54
开发
浏览 86
shevechco
手机浏览
评论数 0

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

1.css实现

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

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

2.javasciprt实现

01.
<script>
02.
$(window).scroll(function(){
03.
	var Ntop = $(".nav").offset().top;
04.
	var Htop = $(window).scrollTop();
05.
	if(Htop > Ntop){
06.
		$(".nav").addClass("on");
07.
	}else{
08.
		$(".nav").removeClass("on");
09.
	}
10.
})
11.
</script>

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

01.
.on{
02.
	position:fixed;
03.
	top:0;
04.
}

标签
css
javascript

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

今日天气

分类统计

博文归档

4篇

9篇

25篇

13篇

1篇

1篇

3篇

7篇

9篇

热门标签

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

评论列表

相关推荐