JSFiddle - React, Tailwind, and code Playground

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" data-index="#1">

  </div>
  <div class="scroll" id="blue" data-section="blue" data-index="#2">

  </div>
  <div class="scroll" id="red" data-section="red" data-index="#3">

  </div>
  <div class="scroll" id="green" data-section="green" data-index="#4">

  </div>
  <div class="fixed-nav">
    <ul>
      <li class="cyan active"><a href="#1">cyan</a></li>
      <li class="blue"><a href="#2">blue</a></li>
      <li class="red"><a href="#3">red</a></li>
      <li class="green"><a href="#4">green</a></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 a {
  color: white;
  text-decoration: none;
}

li.active a {
  color: yellow !important;
}

JavaScript

$(document).ready(function() {
  var previousIndex = '#1'; //This will keep track of previous section's index
  $.scrollify({
    section: ".scroll",
    interstitialSection: "",
    easing: "easeOutExpo",
    scrollSpeed: 1100,
    offset: 0,
    scrollbars: false,
    standardScrollElements: "",
    setHeights: false,
    overflowScroll: true,
    updateHash: true,
    touchScroll: true,
    before: function(index, sections) {    
    	//for adding active class to current section
      var currentSection = '.' + $.scrollify.current().data('section');
      $('.fixed-nav').find('li').removeClass('active');
      $(currentSection).addClass('active');  
      
      //get previous section's index value
      previousIndex = getScrollifySectionID(index);
    },
    after: function() {},
    afterResize: function() {},
    afterRender: function() {}
  });
  
  //click event of navigations
  $('.fixed-nav li a').click(function() {
    var targetIndex = $(this).attr('href');    
    
    //condition to check whether we are moving to nearest sections or not
    if (parseInt(previousIndex.replace('#','')) == (parseInt(targetIndex.replace('#','')) + 1) || parseInt(previousIndex.replace('#','')) == (parseInt(targetIndex.replace('#','')) - 1)) {
      $.scrollify.move(targetIndex);
    }
    //this block will be executed when we click on non-nearest sections
    else{
    	$.scrollify.instantMove(targetIndex);
    }
    
  });

	//function will return section data-index value based on index
  function getScrollifySectionID(index) {
    var sectionID = '';
    $('.scroll').each(function(i) {
      if (i == index) {
        sectionID = $(this).data('index');
      }
    });
    return sectionID;
  };
});