JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Main</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="header-container">
      <h1><a class="logo-link" href="#">Tour</a></h1>
      <ul class="nav-menu">
        <li><a class="link" href="#">Home</a></li>
        <li><a class="link" href="#">About us</a></li>
        <li><a class="link" href="#">Social Media</a></li>
        <li><a class="link" href="#">Comment</a></li>
        <li><a class="link" href="#">Share</a></li>
      </ul>
    </div>

    <div class="container" style="background:linear-gradient(to bottom,rgba(255, 255, 255, 1.0) 30%,rgba(255, 255, 255, 0)), url('background.jpg') center no-repeat">
		<div class="text-container">hi</div>
	</div>

<!--     <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script
      language="JavaScript"
      type="text/javascript"
      src="script.js"
    ></script> -->
  </body>
</html>

CSS

* {
  padding: 0;
  margin: 0;
}

html body {
  min-height: 100%;
  height: 900px;
  scroll-behavior: smooth;
}

/* The sticky class is added to the header with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%
}

.header-container {
  position: sticky;
  padding: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.6rem;
  font-family: "Roboto", sans-serif;
}

.nav-menu {
  display: flex;
  margin-top: auto;
  list-style: none;
}

.link {
  padding: 2rem;
  font-weight: bold;
  color: rgba(1, 1, 1, 0.9);
}

.link:link {
  text-decoration: none;
}

.link:visited {
  text-decoration: none;
}

.link:hover {
  text-decoration: none;
  color: rgba(1, 1, 1, 0.8);
}

.link:focus {
  text-decoration: none;
  color: rgba(1, 1, 1, 0.5);
}

.logo-link {
  color: rgba(1, 1, 1, 1);
  font-weight: bolder;
  font-size: 4rem;
}

.logo-link:link {
  text-decoration: none;
}
.logo-link:visited {
  text-decoration: none;
}

.explore-btn {
  display: block;
  position: absolute;
  text-align: left;
  bottom: 60vh;
  left: 8vw;
}

.container {
  height: 80vh;
  width: 100%;
}

.text-container {
	padding:8rem;
}

JavaScript

$(window).scroll(function () {
   if (window.pageYOffset >= 120) {
    $(".header-container").addClass("sticky");
  } else {
    $(".header-container").removeClass("sticky");
  }
});