JSFiddle - React, Tailwind, and code Playground

by Seetpal Singh

HTML

<div class="container">
    <div id="dis" data-list='my'></div>
    <div id="dis1" data-list='data'></div>
    <div id="dis2" data-list='is'></div>
    <div id="dis3" data-list='stored'></div>
    <div id="dis4" data-list='here'></div>
</div>

<nav id="dy_nav">
</nav>

CSS

.container div{ height:500px; }
.container div:nth-child(even){ background:grey; }
#dy_nav {
    position: fixed;
    top: 0;
    left: 0;
}
#dy_nav a {
    display: block;
    padding: 5px 5px 0;
    background: orange;
    text-decoration: none;
	overflow: hidden;
	-webkit-transition: all .2s linear;
	-moz-transition: all .2s linear;
	-o-transition: all .2s linear;
	transition: all .2s linear;
}
#dy_nav a:nth-child(even) {
    background: pink;
}

JavaScript

$.fn.scrollStopped = function(callback) {           
        $(this).scroll(function(){
            var self = this, $this = $(self);
            if ($this.data('scrollTimeout')) {
              clearTimeout($this.data('scrollTimeout'));
            }
            $this.data('scrollTimeout', setTimeout(callback,250,self));
        });
    };
	
	function get_w_h(){
		$w_h	=	$(window).height();
	}
	
	$(window).bind('scroll', function(e) {
		show_active();
	});
	
	$(window).resize(function(){
		get_w_h();
	});
	
	get_w_h();
	
	function show_active(){
		var e = $(window).scrollTop();
		$('.container div').each(function(){
			$pos	=	$(this).position();
			if($pos.top >= (e-50) && $pos.top <= ((e+$w_h)-$w_h/2)){
				 
				$id_	=	$(this).attr('id');
				$this	=	$('#dy_nav a[href="#'+$id_+'"]');
				$this.css({'height':'25px', 'padding':'3'}).siblings().stop( true).css({'height':'0', 'padding':'0'});
				console.log($(this).attr('id'));
				return false;
			}
		});
	}
	
	$(document).ready(function(){
		$i	=	'';
		$len	=	$('[data-list]').length;
		$('[data-list]').each( function(){
			$i++;
			$data	=	$(this).attr('data-list');
			$data_id	=	$(this).attr('id');
			$data_extended	=	"<a href='#"+$data_id+"'>"+$data+"</a>";
			$('#dy_nav').append($data_extended);
			
			if($i == $len){
				
				$('#dy_nav a').bind('click', function(e){
					e.preventDefault();
					show_me_nav();
				});
			}
			
		});
		
		function rebinding(){
			$that_at	=	$that.attr('href');
			
			$('#dy_nav a').bind('click', function(e){
				e.preventDefault();
				show_me_nav();
			})
					
			//calculate destination place
			var dest = 0;
			if ($($that_at).offset().top > $(document).height() - $(window).height()) {
				dest = $(document).height() - $(window).height();
			} else {
				dest = $($that_at).offset().top;
			}
			//go to destination
			$('html,body').animate({
				scrollTop: dest
			}, 1000, 'swing');
		}
		
		function show_me_nav(){
			$('#dy_nav a').css({'height':'25px',...