Scrollify

by RaJesh RiJo

HTML

<script src="https://projects.lukehaas.me/scrollify/script/jquery.scrollify.js"></script>
<div class="container">
  <div class="scroll" id="cyan" data-section=".cyan">

  </div>
  <div class="scroll" id="blue" data-section=".blue">

  </div>
  <div class="scroll" id="red" data-section=".red">

  </div>
  <div class="scroll" id="green" data-section=".green">

  </div>
  <div class="fixed-nav">
    <ul>
      <li class="cyan active">cyan</li>
      <li class="blue">blue</li>
      <li class="red">red</li>
      <li class="green">green</li>
    </ul>
  </div>
</div>

CSS

#cyan,
#blue,
#red,
#green {
  width: 100%;
  height: 100vh;
}

#cyan {
  background-color: cyan;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#green {
  background-color: green;
}

.fixed-nav{
  position:fixed;
  left:20px;
  top:100px;
  color:#fff;
}
li{
  list-style:none;
  padding:10px 0;
}
li.active{
  color:yellow !important;
}

JavaScript

$(document).ready(function() {
  $.scrollify({
    section: ".scroll",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: false,
    standardScrollElements: "",
    setHeights: false,
    overflowScroll: true,
    updateHash: true,
    touchScroll: true,
    before: function() {
    	var currentSection=$.scrollify.current().data('section');
      $('.fixed-nav').find('li').removeClass('active');
      $(currentSection).addClass('active');
    },
    after: function() {},
    afterResize: function() {},
    afterRender: function() {}
  });
});