The practical jQuery page elements fixed navigation top plug-in StickUp, simple jQuery plug-in, realize the page elements fixed, such as navigation fixed so that it always remain visible in the view, in the one-page page can see the effect, you can study.

Usage:

1. Load the plug-in and jQuery

<script src="js/jquery.js">script>
<script src="js/stickUp.min.js">script>
<link href="stickup.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/bootstrap.min.js">script>

2.HTML content (Bootstrap layout)

  <div class="navbar-wrapper">
   <div class="container">
   <div class="navwrapper">
    <div class="navbar navbar-inverse navbar-static-top">
     <div class="container">
      <div class="navbar-header">
       <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
       </button>
       <a class="navbar-brand" href="#"><stickUpa>
      </div>
      <div class="navbar-collapse collapse">
       <ul class="nav navbar-nav">
        <li class="menuItem active"><a href="#home">Homea</li>
        <li class="menuItem"><a href="#features">Featuresa</li>
        <li class="menuItem"><a href="#updates">Updatesa</li>
        <li class="menuItem"><a href="#installation">Installationa</li>
        <li class="menuItem"><a href="#one-pager">One Pagera</li>
        <li class="menuItem"><a href="#extras">Extrasa</li>
        <li class="menuItem"><a href="#wordpress">Wordpressa</li>
        <li class="menuItem"><a href="#contact">Contacta</li>
       </ul>
      </div>
     </div>
    </div>
   </div>

3. Function call

<script type="text/javascript">
     //initiating jQuery
     jQuery(function($) {
      $(document).ready( function() {
        //enabling stickUp on the '.navbar-wrapper' class
        $('.navbar-wrapper').stickUp({
                parts: {
                 0:'home',
                 1:'features',
                 2: 'news',
                 3: 'installation',
                 4: 'one-pager',
                 5: 'extras',
                 6: 'wordpress',
                 7: 'contact'
                },
                itemClass: 'menuItem',
                itemHover: 'active'
               });
        });
       });
<script>

See DEMO for download now

The above is the whole content of this article, I hope to help you to skillfully use jQuery.