JSFiddle - React, Tailwind, and code Playground

HTML

<body> 
<div id="main_nav_container">
        <ul id="main_nav">
            <li><a href="#home">Úvod</a></li>
            <li><a href="#cinnost">Předmět činnosti</a></li>
            <li><a href="#reference">Reference</a></li>
            <li><a href="#certifikaty">Certifikáty</a></li>
            <li><a href="#podilime">Podílíme se</a></li>
            <li><a href="#aktualne">Aktuálně</a></li>
            <li><a href="#kontakt">Kontakt</a></li>
        </ul>
    </div>

<div id="home" class="content">
    home
</div>
<div id="cinnost" class="content">
    cin
</div>
<div id="reference" class="content">
    ref
</div>
<div id="certifikaty" class="content">
    cert
</div>
<div id="podilime" class="content">
    podil
</div>
<div id="aktualne" class="content">
    akt
</div>
<div id="kontakt" class="content">
    kont
</div>
</body>

CSS

body{
    padding-top: 40px;
}
.content{
    height: 400px;
    border-top: 1px solid black;
}
#main_nav{
    position: fixed;
    top:0;
    background: white;
    left: 0;
    width: 100%;
    list-style: none;
}
#main_nav li{
    float: left;
    margin-right: 20px;
}
#main_nav li a{
    color: black;
    text-decoration: none;
    font-size: 10px;
}
#main_nav li.active a{
    color: red;
}

JavaScript

$(function(){
    
    
// Cache selectors
var topMenu = $("#main_nav"),
    topMenuHeight = topMenu.outerHeight()+15,
    // All list items
    menuItems = topMenu.find("a"),
    // Anchors corresponding to menu items
    scrollItems = menuItems.map(function(){
      var item = $($(this).attr("href"));
      if (item.length) { return item; }
    });

// Bind to scroll
$(window).scroll(function(){
   // Get container scroll position
   var fromTop = $(this).scrollTop()+topMenuHeight;

   // Get id of current scroll item
   var cur = scrollItems.map(function(){
     if ($(this).offset().top < fromTop)
       return this;
   });
   // Get the id of the current element
   cur = cur[cur.length-1];
   var id = cur && cur.length ? cur[0].id : "";
   // Set/remove active class
   menuItems
     .parent().removeClass("active")
     .end().filter("[href=#"+id+"]").parent().addClass("active");
});
    
});