JSFiddle - React, Tailwind, and code Playground

by Shishir Morshed

HTML

<div class="header_part">Header Part</div>
<div class="section_stick">
  <ul>
    <li><a href="#Link1">Link1</a></li>
    <li><a href="#Link2">Link2</a></li>
    <li><a href="#Link3">Link3</a></li>
    <li><a href="#Link4">Link4</a></li>
  </ul>
</div>
<div id="Link1">Link1 data</div>
<div id="Link2">Link2 data</div>
<div id="Link3">Link3 data</div>
<div id="Link4">Link4 data</div>

CSS

* {
  margin: 0;
  padding: 0;
}

ul,li,ol{
  list-style-type:none;
  margin:0;
  padding:0;
}
#Link1,#Link3{
  background:chocolate;
  color:white;
  min-height:400px;
    clear:both;

}
#Link2,#Link4{
  background:tomato;
  color:white;
  min-height:400px;
    clear:both;
}
.section_stick ul {
  background: #ccc;
  border: 1px solid;
}
.section_stick ul li{
  /* float:left; */
  display: inline-block;
  line-height: 40px;
  width:100px;
  height:40px;
}
.header_part{
  min-height:182px;
}

.fixed_nav {
  position: fixed;
  width: 100%;
  top: 0;
}

.is-active {
  font-weight: bold;
}

JavaScript

$(document).ready(function(){

var nav = $(".section_stick");
var stickyClass = "fixed_nav";
var headerHeight = $('.header_part').height();
var content = $('#Link1, #Link2, #Link3, #Link4');


$(window).scroll(function() {
  stickyMenuHandler();
  activeMenuHandler();
});


function activeMenuHandler(){
	content.each(function(){

 	 	
	  	if(isElementInViewport($(this))){
        var _id = $(this).attr('id');
        $('.section_stick a').removeClass('is-active');
        $('.section_stick a[href="#' + _id +'"]').addClass('is-active');
	    }
  });
}

function stickyMenuHandler(){
  if( $(window).scrollTop() > headerHeight ) {
    nav.addClass(stickyClass);
  } else {
    nav.removeClass(stickyClass);
  }
};

nav.find('a').click(function(e){
	e.preventDefault();
  
  var targetContent = $($(this).attr('href'));
  $('html, body').animate({
    scrollTop: targetContent.offset().top
  }, 500);
});

function isElementInViewport (el) {

    //special bonus for those using jQuery
    if (typeof jQuery === "function" && el instanceof jQuery) {
        el = el[0];
    }

    var rect = el.getBoundingClientRect();

    return (
        rect.top >= 0 &&
        rect.left >= 0 &&
        rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
        rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */
    );
}


	});