JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    <div id="navigation-panel">
      <ul id="main-menu">
          <li>
              <a href="#about-us" class="smooth-scroll">About us</a>
          </li>
          <li>
              <a href="#services" class="smooth-scroll">Services</a>
          </li>
          <li>
              <a href="#contact" class="smooth-scroll">Contact</a>
          </li>
      </ul>
    </div>
    
    <div class="container">
    </div>

CSS

#navigation-panel {
  transition: all 1s linear;
}

.container {
  height: 1000px;
}

JavaScript

$(window).scroll(function () {
console.log($(window).scrollTop());
        if($(window).scrollTop() > 150) {
            $('#navigation-panel').css('opacity', 1);
            $('#navigation-panel').css('position', 'fixed');
            $('#slider-wrapper').css('padding-top', 0);

        } else {
            $('#navigation-panel').css('position', 'relative');
        }
    });