Smart Navigation Toggle Button On Scroll - jQuery Transform

Uses jQuery to detect the scroll depth and display a toggle button to show / hide the top navigation menu when the visitor scrolls down the page.

How to use it:

1. Create a top navigation with hash tags pointing to the content sections of your web page.

<div id="navigation">
  <ul>
    <li><a href="#home">HOME</a></li>   
    <li><a href="#services">SERVICES</a></li>
    <li><a href="#works">WORKS</a></li>
    <li><a href="#about">ABOUT</a></li>
    <li><a href="#contact">CONTACT</a></li>
  </ul>
</div>

2. Create a button to toggle the top navigation.

<button>...</button>

3. Create container sections with corresponding IDs.

<div class="wrapper">
  <div id="home" class="page">
    <h3>Home</h3>
  <div id="services" class="page">
    <h3>SERVICES</h3>
  </div>
  <div id="works" class="page">
    <h3>WORKS</h3>
  </div>
  <div id="about" class="page">
    <h3>ABOUT</h3>
  </div>
  <div id="contact" class="page">
    <h3>CONTACT</h3>
  </div>
</div>

4. Include the latest version of jQuery library at the bottom of the web page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> 

5. Show / hide the top navigation & toggle button on scroll

$(window).scroll(function() {
  if ($(this).scrollTop() >= 20) {
      $('button').fadeIn(200);
  } else {
      $('button').fadeOut(200);
  }
});

6. Show / hide the top navigation & toggle button on scroll

$(window).scroll(function() {
  if ($(this).scrollTop() >= 20) {
      $('button').fadeIn(200);
  } else {
      $('button').fadeOut(200);
  }
});

7. Enable the toggle button.

$(document).ready(function(){
  $(this).scrollTop(0);
    $('button').click(function() {
    $('#navigation').slideToggle('slow');
  });

  $('li').click(function () {
   $('#navigation').slideUp('slow');
  });
});

8. Implement smooth scrolling with hash change support.

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        event.preventDefault(); 
      }
    }
  });
});

---

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