Sticky Top Navigation Menu using jQuery Plugin

Submitted by alpha_luna on Tuesday, August 2, 2016 - 17:05.

Sticky Top Navigation Menu using jQuery Plugin

This is another tutorial for jQuery menu plugin that our navigation menu stick at the top of our page when the user scrolling down our created page. This plugin also provides other function that to know the user what they are currently viewing on the page corresponding to the stick navbar menu. Using CSS, the sticky navbar menu item will be highlighted on its corresponding ID when the user scrolling down our page in and out of view. First, load this jQuery script library and jQuery stickup plugin to your page. Copy and paste this before end of your BODY tag.

    <script src="js/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
        <script src="js/stickUp.min.js"></script>

Second, create a simple navigation menu.

    <!-- START THE NAVBAR -->
    <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="#">Free Tutorials</a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav">
                <li class="menuItem active"><a href="#home">Home</a></li>
                <li class="menuItem"><a href="#programming">Programming</a></li>
                <li class="menuItem"><a href="#mobile">Mobile</a></li>
                <li class="menuItem"><a href="#blog">Blog</a></li>
                <li class="menuItem"><a href="#one-pager">Articles</a></li>
                <li class="menuItem"><a href="#extras">Tutorials</a></li>
                <li class="menuItem"><a href="#wordpress">Contact</a></li>
                <li class="menuItem"><a href="#contact">Submit Code</a></li>    
              </ul>
            </div>
          </div>
        </div> 
      </div><!-- End Navbar -->
      </div>
    </div> <!-- END NAVBAR -->

Lastly, copy and paste this plugin then you're done.

            <script type="text/javascript">
              //initiating jQuery  
              jQuery(function($) {
                $(document).ready( function() {
                  //enabling stickUp on the '.navbar-wrapper' class
                  $('.navbar-wrapper').stickUp({
                              });
                });
              });
            </script>

Output

Note: You can customize your menu whatever your desired design by changing the CSS. If you are interested in programming, we have an example of programs that may help you even just in small ways. Share us your thoughts and comments below. Thank you so much for dropping by and reading this tutorial post. For more updates, don’t hesitate and feel free to visit this website more often and please share this with your friends or email me at [email protected]. Practice Coding. Thank you very much.

Add new comment

51 views