怎么让页面元素在页面滚动到某个位置后固定，即便页面在滚动，目标元素仍然能出现在设定的位置呢？

stickUp .js能做到，这是非常简单好用的一个jquery插件!

作用：

stickUp 能让页面目标元素“固定”在浏览器窗口的顶部，即便页面在滚动，目标元素仍然能出现在设定的位置。此插件可以在多页面的网站上工作，也能在单页面上面实现导航功能。

使用方法：

1. 在页面引用stickUp .js和stickUp .css两个文件

2.页面html代码示例：

<div class="pro-menu">
    <ul class="nav nav-tabs nav-tabs-detail">
        <li class="menuItem active"><a href="#features">Features</a></li>
        <li class="menuItem"><a href="#application">Application</a></li>
        <li class="menuItem"><a href="#technical">Technical Specifications</a></li>
        <li class="menuItem"><a href="#download">Download</a></li>
        <li class="menuItem"><a href="#related">Related Products</a></li>
    </ul>
</div>
<div class="pro-block" id="features">
</div>
<div class="pro-block" id="application">
</div>
<div class="pro-block" id="technical">
</div>
<div class="pro-block" id="download">
</div>
<div class="pro-block" id="related">
</div>

3.页面js代码：

<script type="text/javascript">
     jQuery(function($) {
       $(document).ready( function() {
         $('.pro-menu').stickUp({
                       parts: {
                         0:'features',
                         1:'application',
                         2: 'technical',
                         3: 'download',
                         4: 'related'
                       },
                       itemClass: 'menuItem',
                       itemHover: 'active',
                       topMargin: 'auto'
                     });
       });
     });
   </script>

下载链接：https://github.com/LiranCohen/stickUp

演示地址： http://www.bootcss.com/p/stickup/