一个动态导航栏的简单实现

这个问题是面试中遇到的。。。

要求

实现滚动条滚到一定高度时，导航栏固定。

思路

1.实现一个位置在页面下方的导航栏
2.添加滚动条监听函数，当滚动到一定高度时，为导航栏添加属性：

.fix {
   position:fixed;
   top:0;
   width:100%;
}

实现过程

1.一个位置在页面下方的导航栏

<div class="location" id="location">
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">导航</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">JS</a></li>
                    <li><a href="#">CSS</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            HTML <b class="caret"></b>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a href="#">jmeter</a></li>
                            <li><a href="#">EJB</a></li>
                            <li><a href="#">Jasper Report</a></li>
                            <li class="divider"></li>
                            <li><a href="#">分离的链接</a></li>
                            <li class="divider"></li>
                            <li><a href="#">另一个分离的链接</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
</div>

效果：

导航

2.添加监听函数（在页面加载时添加）

 function load() {
      $(window).scroll(function (event) {
           if ($(window).scrollTop() > 512) {
                $("#location").removeClass("location").addClass("fix");
           }
           else
               $("#location").removeClass("fix").addClass("location");
            });
 }

监听滚动条垂直移动的距离$(window).scrollTop()，如果大于了导航栏距顶部的高度就追加样式。否则就保持之前的样式。
感觉重点还是在思路，有了思路一下子就能实现出来。
实现过程比较简单，如果有更好的方法以及可以改进的地方，欢迎提出宝贵建议。