导航栏滚动后固定在顶部

很多时候我们都会用到这个导航栏固定在顶部的功能,也许为了美观,也许为了装逼,但最重要的应该还是浏览体验了,而很多导航栏并不是位于页面的最顶端(可能被夹在中间),所以就有了这个所谓的导航栏下拉一定距离后再固定在顶端,或者你可以叫他导航跟随.

直接上代码吧,首先是html部分(注意nav-fixed-top的位置):

<pre class="brush:html;toolbar:false"><div class="nav-fixed-top">
        <div class="uk-container uk-container-center uk-margin-top">
            <div class="uk-grid">
                <div class="uk-width-1-6">
                    <img src="img/logo.png" class="uk-img-preserve"/>
                </div>
                <div class="uk-width-5-6 uk-margin-top">
                    <nav class="uk-navbar">
                        <div class="uk-navbar-flip">
                            <ul class="uk-navbar-nav ">
                                <li class="uk-active"><a href="">首页</a></li>
                                <li><a href="">关于我们</a></li>
                                <li><a href="">新闻资讯</a></li>
                                <li><a href="">XX行业</a></li>
                                <li><a href="">XX行业</a></li>
                                <li><a href="">联系我们</a></li>
                            </ul>&nbsp;&nbsp;&nbsp;&nbsp;
                            <i class="uk-icon-weixin uk-icon-medium uk-text-main"></i>
                        </div>
                    </nav>
                </div>
            </div>
        </div>
    </div>

css部分:

<pre class="brush:css;toolbar:false">.nav-fixed-top {
    position: relative;
    z-index: 999;}.fixednav {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    width: 100%;
    background-color: #FFFFFF;
    border-bottom: 1px solid #eaeaea;
    box-shadow: 0 2px 5px rgba(0,0,0,.1);}CSS

js部分:

<pre class="brush:js;toolbar:false">$(function(){
    var navr=$(".nav-fixed-top"); 
    var winr=$(window); 
    var scr=$(document);
    winr.scroll(function(){
        if(scr.scrollTop()>=50){
            navr.addClass("fixednav"); 
        }else{
            navr.removeClass("fixednav");
        }
    })  })JavaScript

ok,基本就是这样了.