stickyNavbar.js - Fancy sticky navigation

stickyNavbar.js is a jQuery plugin that helps you stick your navigation bars to the top of the browser window during scrolling. It could stop right here but stickyNavbar.js offers more: you can use your favourite jQuery effects or even fantastic Animate.CSS library to spice up your navigation. The plugin offers lot of options to suit everyone's needs.

• denizli escort
• denizli escort
• didim escort
• düzce escort
• edirne escort
• edirne escort
• edremit escort

1. INCLUDE CSS AND JS FILES

<!-- this goes inside the header tag-->
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css">
<!-- all these references goes before the closing body tag-->
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="js/jquery.stickyNavbar.min.js"></script>

2. HTML

<div id="header" class="header">
   <nav id="nav">
       <ul class="nav navbar-nav">
           <li>
             <a href="#home">Home</a>
           </li>
           <li>
             <a href="#about">About</a>
           </li>
           <li>
             <a href="#services">Services</a>
           </li>
           <li>
             <a href="#contact">Contact</a>
           </li>
       </ul>
   </nav>
</div>

The most important part here are the href attributes of the anchor tags. They should point to corresponding div section with the same id attribute.
Thanks to this every navigation link will be highlighted as soon as corresponding section hits the bottom of the navigation wrapper.
Also add scrollto class to every div section so the script can recognize which href attribute belongs to which div. You can choose your own class title instead of scrollto in the options object.
Your page HTML markup should looks like this:

<div id="home" class="scrollto">
    <!-- Your content goes here -->
</div>
<div id="about" class="scrollto">
    <!-- Your content goes here -->
</div>
<div id="services" class="scrollto">
    <!-- Your content goes here -->
</div>
<div id="contact" class="scrollto">
    <!-- Your content goes here -->
</div>

4. CSS

The styling of the navigation wrapper, ul and li elements is really up to you. In fact there is really only one style needed in your CSS

.active {
    color: #fff !important;
    text-decoration: underline !important;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

This ensures the highlighting of the active class. transform: translate3d(0, 0, 0) is a hack that triggers hardware acceleration during CSS3 animations.

4. JAVASCRIPT

$(function () {
   $('.header').stickyNavbar();
});

5. OPTIONS

$(function () {
  $('.header').stickyNavbar({
      activeClass: "active",        // Class to be added to highlight nav elements
      sectionSelector: "scrollto",  // Class of the section that is interconnected with nav links
      navOffset: 0,                 // Offset from the default position of this() (nav container)
      animDuration: 250,            // Duration of jQuery animation
      startAt: 0,                   // Stick the menu at XXXpx from the top of the this() (nav container)
      easing: "linear",             // Easing type if jqueryEffects = true, use jQuery Easing plugin to extend easing types - gsgd.co.uk/sandbox/jquery/easing
      animateCSS: true,             // AnimateCSS effect on/off
      animateCSSRepeat: false,      // Repeat animation everytime user scrolls
      bottomAnimation: false,       // CSS animation on/off in case we hit the bottom of the page
      cssAnimation: "fadeInDown",   // AnimateCSS class that will be added to selector
      jqueryEffects: false,         // jQuery animation on/off
      jqueryAnim: "slideDown",      // jQuery animation type: fadeIn, show or slideDown
      selector: "a",                // Selector to which activeClass will be added, either "a" or "li"
      mobile: false                 // If false nav will not stick under 480px width of window
  });
});