Dynamically open menus on page scroll

by Sree K

HTML

<nav>
  <ul>
    <li><a href="#1">First</a>
         <ul id="sub-menu1">
             <li>Item 1</li>
             <li>Item 2</li>
         </ul> 
    </li>
    <li><a href="#2">Second</a>
    </li>
    <li><a href="#3">Third</a>
        <ul id="sub-menu3">
             <li>Item 1</li>
             <li>Item 2</li>
         </ul>
    </li>
    <li><a href="#4">Fourth</a>
        <ul id="sub-menu4">
             <li>Item 1</li>
             <li>Item 2</li>
        </ul>
    </li>
    <li><a href="#5">Fifth</a>
          <ul id="sub-menu5">
             <li>Item 1</li>
             <li>Item 2</li>
         </ul> 
    </li>
  </ul>
</nav>

<div class="sections">
  <section id="1"><h1>First</h1></section>
  <section id="2"><h1>Second</h1></section>
  <section id="3"><h1>Third</h1></section>
  <section id="4"><h1>Fourth</h1></section>
  <section id="5"><h1>Fifth</h1></section>
</div>
<footer></footer>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans);

ul li ul {
    position: absolute;
    top: 60px;
    width: 175px;
    height: 35px;
    padding: 0;
    display: none;
}

ul li ul li {
    float: left;
    padding-top: 5px;
    color: #fff;
}

#sub-menu1 {
    background: magenta;
}

#sub-menu3 {
    background: blue;
}

#sub-menu4 {
    background: orange;
}

#sub-menu5 {
    background: purple;
}

footer {
  height: 500px;
  background: blue;
}
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Open Sans', sans-serif;
}

/* Navigation */

nav {
  width: 100%;
  height: 60px; 
  position: fixed; 
  top: 0;
  background: #1ABC9C;
}

nav ul {
  padding: 20px;
  margin: 0 auto;
  list-style: none;
  text-align: center;
}
nav ul li {
  display: inline-block;
  margin: 0 10px;
}
nav ul li a {
  padding: 10px 0;
  color: #fff;
  font-size: 1rem;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.2s ease;
}
nav ul li a:hover {
  color: #34495E;
}
a.active {
  border-bottom: 2px solid #ecf0f1;
}

/* Headings */

h1 {
  font-size: 5rem;
  color: #34495E;
}

/* Sections */

section {
  width: 100%;
  padding: 50px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  height: 500px;
  text-align: center;
}
section:nth-child(even) {
  background: #ecf0f1;
}
section:nth-child(odd) {
  background: #bdc3c7;
}
.sections section:first-child {
  margin-top: 60px;
}
section.active {}

footer {
  height: 500px;
  background: #34495e;
}

JavaScript

var sections = $('section')
  , nav = $('nav')
  , navHeight = nav.outerHeight();

$(window).on('scroll', function () {
    var curPos = $(this).scrollTop();
    sections.each(function(index,element) {
        var secPos = $(this).offset().top;
        var secHeight = $(this).outerHeight();
        var contentTop = secPos - navHeight;
        var bottom = contentTop + secHeight;
        
        if (curPos >= contentTop && curPos <= bottom) {
            var act = nav.find('a[href="#'+$(this).attr('id')+'"]');
            var topOfWindow = $(window).scrollTop();
            var pageHeight = $(window).height();
            nav.find('a').removeClass('active');
            act.addClass('active');
            slideMenu(act);
            
            if(topOfWindow===0) {    //Hides the menu when scroll touches page top
                nav.find('a').removeClass('active');
                $('ul[id*="sub-menu"]').slideUp();   //[id*=...] is a wildcard char.  See http://stackoverflow.com/a/9284749/1369473.
            }
        }
    });
});

function slideMenu(go) {            // Slides the menu up/down
    if(go.next('ul').length) {
        go.parent().siblings().find('ul:first').slideUp();
        go.next('ul').slideDown();
    } else {
        $('ul[id*="sub-menu"]').slideUp();
    }
}

nav.find('a').on('click', function () {
  var $el = $(this)
    , id = $el.attr('href');
  
  $('html, body').animate({
    scrollTop: $(id).offset().top - nav_height
  }, 500);
  
  return false;
});