header
    #header-scroll.small
        h1
            a(href='#') TITLE
        nav
            ul
                li
                    a(href='#1') First
                li
                    a(href='#2') Second
                li
                    a(href='#3') Third
                li
                    a(href='#4') Fourth
                li
                    a(href='#5') Fifth
section#1
    h1 First
section#2
    h1 Second
section#3
    h1 Third
section#4
    h1 Fourth 
section#5
    h1 Fifth
View Compiled
@import url(https://fonts.googleapis.com/css?family=Bitter);

 *
    margin 0
    padding 0
    box-sizing border-box
    font-family bitter
html,body
  height 100%
  min-height 100%
a
  text-decoration none
  color white
  &.active
    border-bottom 2px solid #85C2FF

.header
  height auto

#header-scroll
  position fixed
  height 100%
  background rgba(0,0,0,.4)
  left 0
  top 0
  float left
  width 100%
  -ms-transition all 0.3s ease-out
  -moz-transition all 0.3s ease-out
  -webkit-transition all 0.3s ease-out
  -o-transition all 0.3s ease-out
  transition all 0.3s ease-out
  h1
    padding 200px 0
    height 100%
    font-size: 4em
    text-align center
    line-height 40px
    -ms-transition all 0.3s ease-out
    -moz-transition all 0.3s ease-out
    -webkit-transition all 0.3s ease-out
    -o-transition all 0.3s ease-out
    transition all 0.3s ease-out
  &.small
    height auto
    display inline-block
    float left
    h1
      padding 10px 0
      height auto
      font-size 1rem
      text-decoration none
      font-weight bold
      display inline-block

body
  font-family 'Open Sans', sans-serif

nav
  width 100%
  height 60px
  position fixed
  top 0
  ul
    padding 20px
    margin 0 auto
    list-style none
    text-align center
    li
      display inline-block
      margin 0 10px
      a
        padding 10px 0
        color #fff
        font-size 1rem
        text-decoration none
        font-weight bold
        transition all 0.2s ease
        &:hover
          color #85C2FF

h1
  font-size 5rem
  color #34495E

section
  width 100%
  height 100%
  padding 200px 0
  background #fff
  border-bottom 1px solid #ccc
  text-align center
  &:nth-child(even)
    background #ecf0f1
  &:nth-child(odd)
    background #eff9ff

.sections
  section
    &:first-child
      margin-top 100px
View Compiled

//in case js in turned off
   $(window).on('load', function () {
        $("#header-scroll").removeClass("small")
  });

$(window).scroll(function () {
     var sc = $(window).scrollTop()
    if (sc > 1) {
        $("#header-scroll").addClass("small")
    } else {
        $("#header-scroll").removeClass("small")
    }
});

//scrollspy
$(window).on('scroll', function () {
   var sections = $('section')
    , nav = $('nav')
    , nav_height = nav.outerHeight()
    , cur_pos = $(this).scrollTop();
  sections.each(function() {
    var top = $(this).offset().top - nav_height,
        bottom = top + $(this).outerHeight();
 
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active');
      sections.removeClass('active');
 
      $(this).addClass('active');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active');
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js