导航栏滚动到顶部后固定

  起初，以为这个问题很难，结果真正的做起来还是挺简单的。

  html部分：

  <div class="viewport">

    <div class="top"></div>
    <div class="nav"></div>
    <div class="middle"></div>
    <div class="bottom"></div>
</div>

css部分：

.viewport{500px; border:1px solid #cecece; margin:0 auto;}
.top{100%; height:400px; background:red;}
.nav{position:fixed; 500px; height:70px; background:orange;}
.middle{100%; height:600px; background:yellow;}
.bottom{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);
    }
});