导航栏滚动到顶部后固定
起初,以为这个问题很难,结果真正的做起来还是挺简单的。
html部分:
<div class="viewport">
<div class="top"></div>
<div class="nav"></div>
<div class="middle"></div>
<div class="bottom"></div>
</div>
css部分:
.viewport{width:500px; border:1px solid #cecece; margin:0 auto;}
.top{width:100%; height:400px; background:red;}
.nav{position:fixed; width:500px; height:70px; background:orange;}
.middle{width:100%; height:600px; background:yellow;}
.bottom{width:100%; height:500px; background:green;}
js代码:
$(window).scroll(function(){
var win_h = $(window).scrollTop();
var nav_h = $(".top").height();
// console.log(nav_h+"====="+win_h);
if(win_h == nav_h){
$(".nav").css("top",0);
}
});