JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
    
</head>
<body>
    
<div id="menu">
    <nav>
   
     <ul>
         <li><a href="#alfa" class="tlacitko"><span>ALFA</span></a></li>
         <li><a href="#beta" class="tlacitko"><span>BETA</span></a></li>
         <li><a href="#gama" class="tlacitko"><span>GAMA</span></a></li>
         <li><a href="#delta" class="tlacitko"><span>DELTA</span></a></li>
     </ul>
   </nav>
</div>
    
    <div id="main">
        
            <section>
            <article id="alfa">
                <h1>ALFA IPSUM</h1>
                <div class="violetstrip"></div>
                <p>
                    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis ante orci, molestie vitae vehicula venenatis, tincidunt ac pede. Etiam bibendum elit eget erat. Etiam dui sem, fermentum vitae, sagittis id, malesuada in, quam. Suspendisse nisl. Aenean placerat. Sed convallis magna eu sem. Integer in sapien. Nulla non arcu lacinia neque faucibus fringilla. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Aenean vel massa quis mauris vehicula lacinia. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nunc tincidunt ante vitae massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur ligula sapien, pulvinar a vestibulum quis, facilisis vel sapien. Nullam dapibus fermentum ipsum.

                    Nullam faucibus mi quis velit. Nulla pulvinar eleifend sem. Ut tempus purus at lorem. Integer in sapien. Aliquam ante. Mauris dictum facilisis augue. Praesent in mauris eu tortor porttitor accumsan. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat. Class aptent taciti sociosqu...

CSS

*{
    /*background-color: #7A0DE0;*/
    margin: inherit;
    font-family: verdana;
}

body{
    background-color: #FDFDFD;
/*
    background: url(../img/dashes1.png),url(../img/dashes3.png), url(../img/dashes5.png), url(../img/dashes8.png), url(../img/dashes12.png), url(../img/dashes9.png);
    background-repeat: no-repeat;
    background-position-y: 48%, 30%, 100%, 70%, 2%, 18%;
    background-position-x: 0%, 100%, 0%, 100%, 100%, 0%;   
*/
}



article{
    width: 50%;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}

h1{
    color: #7A0DE0;
    padding-top: 100px;
    padding-bottom: 50px;
    font-size: 100px;
    text-align: center;
}

.violetstrip{
    width: 250px;
    position: relative;
    left: -80px;
    border-bottom: 9px solid #7A0DE0;
    margin-bottom: 100px;
}

article p{
    font-size: 25px;
}


article{
    padding-bottom: 120px;
}

section{
    padding-top: 100px;
    z-index: 200 !important;
}

#menu
{
   width: 100%;
   height: 60px;
}

nav
{
   width: 100%;
   height: 60px;
   z-index: 1000;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.1);
}

nav ul
{
   margin: 0px auto;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
   background: #fff;
    height: 60px;
    box-shadow: 0 10px 20px -5px rgba(0, 0, 0, 0.04);
}

nav ul li
{
   float: left;
    list-style-type: none;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

nav ul li a
{
   color: #0CC6AC;
   display: block;
   padding: 0 20px;
   text-decoration: none;
}

nav ul li a:hover{
    color: #7A0DE0;
}

#violetmenu{
    background-color: #7A0DE0;
    width: 100%;
    height: 70px;
}


nav ul li.active a
{
    color: #7A0DE0;
}

JavaScript

$(function(){

	fixMenu();
	fixAside();
	smoothScroll();
    activeItem();
    sipky();

   $(window).scroll(function(){
      activeItem()
       sipky()
   });
});

function fixMenu()
{
	var menu_place = $('#menu').offset().top;
	var menu = $('nav');

	$(window).scroll(function(){

		var scroll_top = $(window).scrollTop();

		if ( scroll_top > menu_place )
			{
				menu.css({ 'position': 'fixed', 'top':0 });
			}
		else
			{
				menu.css({ 'position': 'relative' });
			}
	});
}

function activeItem()
{
   var menu = $('nav ul');
   var odchylka = 200;
   var scroll_top = $(window).scrollTop();

   menu.find('li.active').removeClass('active');

   $("#main section article").each(function(){
      var toto = this;
      var article_top = $(toto).offset().top;
      var article_height = $(toto).innerHeight();
      var article_id = $(toto).attr('id');
            
      var min = article_top - odchylka;
      var max = article_top + article_height - odchylka;

      if ( (scroll_top > min) && (scroll_top < max) )
      {
         menu.find('li a[href="#'+article_id+'"]').parent().addClass('active');
      }
   });   
}

function sipky()
{
$(document).keydown(function(e) {
    var menu = $('nav ul');
    var odchylka = 200;
    var scroll_top = $(window).scrollTop();
    var menu = $('#menu');
    var rychlost = 1000;
    var efekt = "easeInOutExpo";
    switch(e.which) {
        case 38: // up
            $("#main section article").each(function(){
            var toto = this;
            var article_top = $(toto).offset().top;
            var article_height = $(toto).innerHeight();
            var article_id = $(toto).attr('id');
            var predchozi = toto.previousSibling;
            var predchozi_id = $(predchozi).attr('id');
            var min = article_top - odchylka;
            var max = article_top + article_height - odchylka;
            var kam = "#" + predchozi_id;
            if ((scroll_top > min) && (scroll_top < max)) {
                var...