JSFiddle - React, Tailwind, and code Playground

HTML

<header>
  <div class="logo">STICKY MENU ON SCROLL!</div>
  <div class="intro">Some dumbass tagline goes here</div>
  <div class="menu">Meni je ovde - home - links - menu1 menu2</div>
</header>

<div class="content">
 
  <em><p>This thingie is also available as a ready-made jQuery plugin at <a href="https://github.com/senff/Sticky-Anything" target="_blank">https://github.com/senff/Sticky-Anything</a> and will allow you to make ANY element sticky -- not just the menu.<br><strong>Now also available as a <a href="https://wordpress.org/plugins/sticky-menu-or-anything-on-scroll/">WordPress plugin!</a></strong></em></p>
  
  <h2>So how does this thing work?</h2>
  
  <p>Upon page load, jQuery clones the menu <em>(= the element we want to see sticking at the top of the screen)</em>. The original menu gets class "oris set to <strong>display:none;</strong> so we won't see this sticky one right away.</p>
    
  <p>Upon page load, jQuery clones the menu <em>(= the element we want to see sticking at the top of the screen)</em>. The original menu gets class "oris set to <strong>display:none;</strong> so we won't see this sticky one right away.</p>
      <p>Upon page load, jQuery clones the menu <em>(= the element we want to see sticking at the top of the screen)</em>. The original menu gets class "oris set to <strong>display:none;</strong> so we won't see this sticky one right away.</p>
      <p>Upon page load, jQuery clones the menu <em>(= the element we want to see sticking at the top of the screen)</em>. The original menu gets class "oris set to <strong>display:none;</strong> so we won't see this sticky one right away.</p>
      <p>Upon page load, jQuery clones the menu <em>(= the element we want to see sticking at the top of the screen)</em>. The original menu gets class "oris set to <strong>display:none;</strong> so we won't see this sticky one right away.</p>
      <p>Upon page load, jQuery clones the menu <em>(= the element we want to see sticking at the top of the...

CSS

* {font-family:arial; margin:0; padding:0;}
.logo {font-size:40px; font-weight:bold;color:#00a; font-style:italic;}
.intro {color:#777; font-style:italic; margin:10px 0;}
.menu {background:#00a; color:#fff; height:40px; line-height:40px;letter-spacing:1px; width:100%;}
.content {margin-top:10px;}
.menu-padding {padding-top:40px;}
.content {padding:10px;}
.content p {margin-bottom:20px;}

JavaScript

// Create a clone of the menu, right next to original.
$('.menu').addClass('original').clone().insertAfter('.menu').addClass('cloned').css('position','fixed').css('top','0').css('margin-top','0').css('z-index','500').removeClass('original').hide();

scrollIntervalID = setInterval(stickIt, 10);


function stickIt() {

  var orgElementPos = $('.original').offset();
  orgElementTop = orgElementPos.top;               

  if ($(window).scrollTop() >= (orgElementTop)) {
    // scrolled past the original position; now only show the cloned, sticky element.

    // Cloned element should always have same left position and width as original element.     
    orgElement = $('.original');
    coordsOrgElement = orgElement.offset();
    leftOrgElement = coordsOrgElement.left;  
    widthOrgElement = orgElement.css('width');
    $('.cloned').css('left',leftOrgElement+'px').css('top',0).css('width',widthOrgElement).show();
    $('.original').css('visibility','hidden');
  } else {
    // not scrolled past the menu; only show the original menu.
    $('.cloned').hide();
    $('.original').css('visibility','visible');
  }
}