根据页面滚动的距离确定导航栏是否置顶

默认情况下导航栏是页面的一部分，页面滚动，当导航栏的位置位于屏幕顶部时，导航栏置顶

代码（基于jQuery）：

//jQuery

    $(function(){ 
        //获取导航距离页面顶部的距离  
        var toTopHeight = $(".timeNav").offset().top; 
        //监听页面滚动  
        $(window).scroll(function() {  
            //判断页面滚动超过导航时执行的代码  
            if( $(document).scrollTop() > toTopHeight ){  
                    //fixed定位  
                    $("#nav").addClass("nav_fixed");  
            }else{// 
                    //移除fixed定位，采用默认流布局  
                    $("#nav").removeClass("nav_fixed");  
            }  
        });

//html

<div class="timeNav" id="nav"></div>

//css

     .timeNav {
            background-color: #7F7F7F;
            height: 50px;
            text-align: center;
            line-height: 50px;
            vertical-align: middle;
            font-weight: bolder;
        }

          .nav_fixed{
        position:fixed;
        top:0;
        width:100%;
        text-align: center
        }