CodePen Embed - Aquatilis Scroll Nav

<nav>
  <div class="wrapper">
    <a href="http://aquatilis.tv" target="_blank">
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="52.012px" height="51.679px" viewBox="0 0 52.012 51.679" enable-background="new 0 0 52.012 51.679" xml:space="preserve">
      <path fill="#231F20" d="M12.674,37.779l-6.288,13.9H0L23.396,0h4.963l23.652,51.679h-6.465l-6.473-13.9l-2.652-6.04L25.874,8.818 l-10.461,22.92L12.674,37.779z"/>
      <rect x="18.825" y="32.195" fill="#231F20" width="14.36" height="2.51"/>
      <rect x="18.825" y="38.134" fill="#231F20" width="14.36" height="2.51"/>
      <rect x="18.825" y="44.294" fill="#231F20" width="14.36" height="2.51"/>
    </svg>
    </a>

    <div class="nodes"> 
        
        <div class="line">
          <div class="blue">
            <div class="red-container">
              <div class="red"></div>
            </div>
          </div>
        </div>

        <div class="node">
          <div class="active-circle">
            <div class="splash"></div>
            <div class="cover">
              <div class="white"></div>
            </div>
          </div>
          <div class="inactive-circle">
            <div class="small-cover">
            </div>
          </div>
        </div>

        <div class="node">
          <div class="active-circle">
            <div class="splash"></div>
            <div class="cover">
              <div class="white"></div>
            </div>
          </div>
          <div class="inactive-circle">
            <div class="small-cover">
            </div>
          </div>
        </div>

        <div class="node">
          <div class="active-circle">
            <div class="splash"></div>
            <div class="cover">

              <div class="white"></div>
            </div>
          </div>
          <div class="inactive-circle">
            <div class="small-cover">
            </div>
          </div>
        </div>

        <div class="node">
          <div class="active-circle">
            <div class="splash"></div>
            <div class="cover">
              <div class="white"></div>
            </div>
          </div>
          <div class="inactive-circle">
            <div class="small-cover">
            </div>
          </div>
        </div>

        <div class="node">
          <div class="active-circle">
            <div class="splash"></div>
            <div class="cover">
              <div class="white"></div>
            </div>
          </div>
          <div class="inactive-circle">
            <div class="small-cover">
            </div>
          </div>
        </div>

        <div class="node">
          <div class="active-circle">
            <div class="splash"></div>
            <div class="cover">
              <div class="white"></div>
            </div>
          </div>
          <div class="inactive-circle">
            <div class="small-cover">
            </div>
          </div>
        </div>

        <div class="node">
          <div class="active-circle">
            <div class="splash"></div>
            <div class="cover">
              <div class="white"></div>
            </div>
          </div>
          <div class="inactive-circle">
            <div class="small-cover">
            </div>
          </div>
        </div>
      </div>
      <div class="shares">
      </div>
    </div>
  </nav>

<section class="items">
  <div class="item main">
    <span>Scroll</span>
  </div>
  
  <div class="item">
    <span>1</span>
  </div>

  <div class="item">
    <span>2</span>
  </div>

  <div class="item">
    <span>3</span>
  </div>

  <div class="item">
    <span>4</span>
  </div>

  <div class="item">
    <span>5</span>
  </div>

  <div class="item">
    <span>6</span>
  </div>

  <div class="item">
    <span>7</span>
  </div>
</section>

@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Squada+One);

* {
  box-sizing: border-box;
}

body {
  background: #000;
  padding: 0px;
  margin: 0px;
}

nav {
   background: rgba(0,0,0,0.8);
   padding: 18px;
  position: fixed;
  bottom: 50px;
   height: 55px;
  left: 50%;
   width: 800px;
   margin-left: -400px;
   z-index: 3;

  .wrapper {
    padding: 0;
      width: 785px;
  }

  .wrapper, svg {
    height: 100%;
  }

  svg {
    margin-right: 15px;
    cursor: pointer;
    height: 20px;
    width: 30px;
      float: left;

    path, rect {
      fill: #fff;
    }
  }

  .nodes {
    position: relative;
    margin-top: -5px;
    margin-left: 5px;
    float: left;
  }

}

.line {
  position: absolute;
  width: 705px;
  height: 1px;
  top: 14px;
  
  .red, .blue {
    width: 100%;
    height: 1px;
  }
  
   .red-container {
    overflow: hidden;
    height: 1px;
    width: 58px;
   }
  
  .red {
    background-color: rgb(75,18,2);
    @include filter-gradient(#4b1202, #fd8107, horizontal);
    @include background-image(linear-gradient(left,  rgba(253,129,7,1) 0%,rgba(253,129,7,1) 16%,rgba(224,58,13,1) 58%,rgba(253,129,7,1) 100%));
    }
  
    .blue {
    background-color: rgb(35,46,58);
      @include filter-gradient(#232e3a, #446b95, horizontal);
      @include background-image(linear-gradient(left,  rgba(35,46,58,1) 0%,rgba(92,125,159,1) 29%,rgba(24,55,87,1) 55%,rgba(68,107,149,1) 100%));
    }
}

.node {
  margin-left: 90px;
  width: 20px;
  height: 20px;
  margin-top: 5px;
  float: left;
  margin-right: -10px;
  position: relative;

  .splash {
      box-shadow: 0px 0px 8px 2px rgba(69, 174, 233, 0.53);
    transform: translateZ(0px) scale( 1 );
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    pointer-events: none;
    opacity: 1;
  }

  
  &.active {

    .active-circle {
      transform: scale(1);
      opacity: 1;
    }

    .splash {
      transition: transform 1200ms, opacity 1500ms;

      transform: translateZ(0px) scale( 2.5 );
      opacity: 0 !important;
    }

    .inactive-circle {
      transition: opacity 200ms;
      opacity: 0; 
    }

  }

  .active-circle {
    transition: all 300ms cubic-bezier(.63,.62,.48,1.84);
    transform: scale(0.7);
    position: absolute;
    opacity: 0;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    background-color: rgb(75,18,2);
    @include filter-gradient(#4b1202, #fd8107, horizontal);
    @include background-image(linear-gradient(left bottom,  rgba(75,18,2,1) 0%,rgba(224,58,13,1) 60%,rgba(253,129,7,1) 100%));


    .cover {
      transform: translateZ( 0px );
      width: 16px;
      height: 16px;
      background: black;
      border-radius: 100%;
      position: absolute;
      top: 2px;
      left: 2px;
    }

    .white {
      transition: all 300ms cubic-bezier(.63,.62,.48,1.84);
      width: 6px;
      height: 6px;
      background: #fff;
      border-radius: 100%;
      position: absolute;
      transform: translateX(5px) translateY(5px) scale(1);
    }
  }

  .inactive-circle {
    transition: all 300ms cubic-bezier(.63,.62,.48,1.84);
    width: 14px;
    height: 14px;
    display: block;
    background: #000;
    position: absolute;
    border-radius: 100%;
    border: 2px solid #5489b1;
    top: 3px;
    left: 3px;
  }

  &:hover {
      
    $quickTransition: all 200ms cubic-bezier(.63,.62,.48,1.84);
    
    cursor: pointer;

    .active-circle {
      transition: $quickTransition;
      transform: scale(0.84);

      .white {
        transition: $quickTransition;
        transform: translateX(4.7px) translateY(5px) scale(1.42); 
      }
    }

    .inactive-circle {
      transition: $quickTransition;
      transform: scale( 0.85 );
    }
  }
}


// The page/numbers
.items {
  position: relative;
  
  .item {
    position: relative;
    width: 100%;
    height: 100%;
    
    span {
      font-family: 'Squada One', cursive;
      color: #fff;
      display: block;
      height: 200px;
      width: 400px;
      margin: auto;
      position: absolute;
      top: 0; left: 0; bottom: 0; right: 0;
      text-align: center;
      font-size: 160px;
    }  
  }
}

View Compiled

$( '.item' ).height( window.innerHeight );
var $document = $( document.body );
var $revealBar = $( '.red-container' );
var wrapperHeight = $document.height();
var stepDistance = 101;
var documentHeight = window.innerHeight;
var positions = [];
var heights = [];
var elements = $( '.item:not(".main")' );

// Cache heights and positions
elements.each(function(i, el) {
  var $element = $(el);
  var height = $element.offset().top;
  positions.push(height);
  heights.push($element.height());
});

var $nodes =  $( '.node' );

// Scroll event
$( document ).scroll( function() {
  var scrollTop = $(window).scrollTop();
  var nodeTop = scrollTop + documentHeight;
  var current = 0;
  
  // Active/non active states
  for( var i = -1; i < positions.length - 1; i++ ) {

    if(nodeTop > positions[i]) {
      current = i;
                  if(i <= 0) continue
      $nodes.eq(i - 1).addClass('active');
    } else {

      $nodes.eq(i - 1).removeClass('active');
    }
  }
  
  // Bar positioning
  var totalWidth;
  if( nodeTop < positions[0] ) {
    // Before first node
    totalWidth = 0;
  } else if ( nodeTop >= positions[positions.length - 1] ) {
    // Past last node
    totalWidth = stepDistance * (positions.length);
  } else {
    // Between nodes
    var nextStep = (nodeTop - positions[current]) / (positions[current + 1] - positions[current]);
    totalWidth = stepDistance * (current + nextStep);
  }

  $revealBar.width(totalWidth);
});

// Click event on nodes
$nodes.each(function(index) {
  $(this).click(function() {
    $('html, body').animate({
      scrollTop: (positions[index + 1] - documentHeight + 10)
    }, 1000);
  });
});

This Pen is owned by Tim Holman on CodePen.

See more by @tholman on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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