A Pen by Nicola Zanon.

index.html

<div class="wrapper">
  <nav id="nav">
    <div class="menu">
      <a class="one" href="#one">One</a>
      <a class="two" href="#two">Two</a>
      <a class="three" href="#three">Three</a>
      <a class="four" href="#four">Four</a>
    </div>
  </nav>
  <section>
    <h1 id="one" class="inview">Section 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
  </section>
  <section>
    <h1 id="two" class="inview">Section 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
  </section>
  <section>
    <h1 id="three" class="inview">Section 3</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
  </section>
  <section>
    <h1 id="four" class="inview">Section 4</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veniam molestias ab iste inventore blanditiis obcaecati harum tempora illo asperiores repellendus perspiciatis illum! Aperiam vitae sint error illo ipsum ratione commodi.</p>
  </section>
</div>

script.js

var el = $("#one");
var menu = $("#nav");
var pos = el.offset().top;

$(window).on("scroll", function() {
  var scrollPos = $(window).scrollTop();
  
  if (scrollPos > (pos - 50)) { //Adjust menu opening
    menu.addClass('stick');
  } 
  else { 
    menu.removeClass('stick');
  }; 
  $('.inview').each(function(){
  var itemOffset = Math.abs($(this).offset().top);
    if (itemOffset > 0 && itemOffset < scrollPos) {
      var menuElm = $(this).attr('id');
      console.log(menuElm);
      $(".menu > a").removeClass("active");
      $("." + menuElm).addClass("active");
    }
  });
});

// Setting the right menu classes

  /*$("h1.inview").on("inview", function (event, visible) {
    if (visible) {
      var elId = "#" + $(this).attr("id");
      $(".menu > a").each(function() {
        var href = $(this).attr("href");
        console.log(href);
        if(elId == href) {
          $(".menu > a").removeClass("active");
          $(this).addClass("active");
        }
      });
    } 
  });*/

/* Performs a smooth page scroll to an anchor on the same page.
http://css-tricks.com/snippets/jquery/smooth-scrolling/ */

$('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);
            return false;
        }
    }
});

Simple-Sticky-Menu-.markdown

Simple Sticky Menu

A simple sticky menu with auto updating classes based on elements position.

A Pen by Nicola Zanon on CodePen.

License.

style.scss

@import "compass";
a { 
  text-decoration:none;
  color: #4c4c4c;
  font-size:20px;
}
p {
  font-size:18px;
  margin:0.5em 0;
}
h1 {
  font-size:2.5em;
  padding-top:15px;
  margin-bottom:1em;
}
.wrapper {
  max-width:1200px;
  margin: 1em auto;
}
section {
  margin-top:2em;
  border-top:1px solid #ccc;
  width:60%;
}
nav {
  background-color:#fff;
  padding:1em 0;
  a {
    margin-right:1em;
    &:last-child {
      margin-right:0;
    }
    &:hover {
      text-decoration:underline;
    }
  }
}
.stick {
  position:fixed;
  top:0;
  left:0;
  opacity:0.8;
  width:100%;
  .menu {
    max-width:1200px;
    margin:0 auto;
    .active {
      text-decoration:underline;
    }
  }
}