css和javascript让导航跟随窗口一起滚动
- 2015-09-14 15:15:54
- 开发
- 57
- 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