Android L Inspired Dynamic Navigation with jQuery and CSS3

A dynamic full page navigation inspired by Android Lollipop UI that gets colored dynamically with a tinted background-color of each following section. Each section is displayed full screen just by one line of CSS. You can use viewport untis for flexible heights and widths. Built on top of HTML5, CSS3 and a little jQuery magic.

How to use it:

1. Create a navigation bar and sectioned content for your single page website.

<nav id="nav">
  <ul>
    <li>Navigation</li>
    <li><a href="#section1">Section 1</a></li>
    <li><a href="#section2">Section 2</a></li>
    <li><a href="#section3">Section 3</a></li>
    <li><a href="#section4">Section 4</a></li>
  </ul>
</nav>

<section id="section1">
  <h1>Section 1</h1>
</section>

<section id="section2">
  <h1>Section 2</h1>
</section>

<section id="section3">
  <h1>Section 3</h1>
</section>

<section id="section4">
  <h1>Section 4</h1>
</section>

2. Style the navigation bar.

nav {
  position: fixed;
  width: 100%;
  top: 0;
  background: #d34836;
  -webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
  transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
}

nav:before {
  content: "";
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.27);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

nav ul {
  position: relative;
  margin: 0;
  z-index: 2;
  text-transform: uppercase;
  text-align: center;
}

nav ul li {
  display: inline-block;
  padding: 1.35em 0;
  margin-right: 3em;
  font-size: 0.9em;
}

nav ul li a {
  text-decoration: none;
  color: #fff;
  font-size: 0.9em;
}

3. Style the sectioned content.

#section1 { background-color: #E91E63; }

#section2 { background-color: #2196F3; }

#section3 { background-color: #009688; }

#section4 { background-color: #FFC107; }

section { height: 100vh; }

5. Load the latest version of jQuery JavaScript at the bottom of the web page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 

6. The JavaScript.

$(document).ready(function () {
  var sections      = $('section');
  var navbar      =  $('#nav');
  var navbarHeight  = navbar.height();

  var sectionOffset = []

  sections.each(function() {
    var section = $(this);

      var position = section.offset().top - navbarHeight;
      var backgroundColor = section.css("background-color");

      sectionOffset.push({'postion': position,'color': backgroundColor});
       
    })

  $(window).on('scroll', function(){
    var scrollPos = $(document).scrollTop();

    $.each(sectionOffset, function(index, section){
      if (scrollPos >= section.postion) {
      navbar.css("background-color", section.color);
      }
    }) 
  });

});

---

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