Shrinking Sticky Navigation Bar with jQuery - prettySticky

prettySticky is a jQuery based sticky header navigation that shrinks to a smaller menu bar with active anchor link highlighting as you scroll down the page. You can also click the anchor links to scroll to desired sections with smooth scrolling effects based on jQuery smooth scroll plugin.

How to use it:

1. Include the jQuery prettySticky plugin's stylesheet in the head section.

<link rel="stylesheet" href="css/prettySticky.css">

2. Create a sticky header navigation as follow:

<nav>
  <div class="container">
    <div> <a href="#top"><img src="logo.png" alt="Logo" class="logo"></a> </div>
    <div class="menu">
      <ul class="nav">
        <li class="nav"><a href="#section-1">Section 1</a></li>
        <li class="nav"><a href="#section-2">Section 2</a></li>
        <li class="nav"><a href="#section-3">Section 3</a></li>
        <li class="nav"><a href="#section-4">Section 4</a></li>
        <li class="nav"><a href="#section-5">Section 5</a></li>
      </ul>
    </div>
  </div>
</nav>

3. Create content sections corresponding to the anchor links created in the previous step.

<section id="section-1">
  ...
</section>

<section id="section-2">
  ...
</section>

<section id="section-3">
  ...
</section>

<section id="section-4">
  ...
</section>

<section id="section-5">
  ...
</section>

3. Include the latest jQuery library together with prettySticky.js and jquery.smooth-scroll.min.js at the bottom of your web page.

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="scripts/prettySticky.js"></script>
<script src="scripts/jquery.smooth-scroll.min.js"></script>

4. Active the shrinking navigation bar by calling the function on the anchor links.

$(document).ready(function(){
  $(".nav a").smoothScroll({
    offset: -$("nav").outerHeight()
  });
});

---

This awesome jQuery plugin is developed by MoyaMiller. For more Advanced Usages, please check the demo page or visit the official website.