JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<header>
  <h1>New Technology Planet</h1>
  <p>
    <h3>The WebSite Is Still Under Construction By Laith SJ</h3>
  </p>
  <p>Teamspeak3 & WebSites Hosting</p>
  <p>Our goal is to give you the best what we can do!</p>
</header>

<nav role='navigation' id="topNav">
  <ul>
    <li class="logo">NewTecPlanet</li>
    <ul style="float:right;list-style-type:none;">
      <li><a class="active" href="#home">Home</a>
      </li>
      <li><a href="#news">News|Updates</a>
      </li>
      <li><a href="#contact">Products</a>
      </li>
      <li><a href="#login">SignUp | Login</a>
      </li>
      <li><a href="#about">About US</a>
      </li>
      <li><a href="#about">Contact Us</a>
      </li>

    </ul>
  </ul>
</nav>
<!-- navagattor end code -->
<div id="section">
  <h2>test</h2>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>
  <p>Test</p>

</div>
<div id="footer">
  New Technology Planet
</div>

CSS

.sticky {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
 }
 
 header {
   background-image: url("pic15.jpg");
   color: #5A4A4A;
   text-align: center;
 }
 
 ul {
   list-style-type: none;
   margin: 0;
   padding: 0;
   overflow: hidden;
   background-color: #333;
 }
 
 li {
   float: left;
   border-right: 1px solid #bbb;
 }
 
 li.logo {
   border-right: none;
   font-family: Impact, Charcoal, sans-serif;
   color: white;
   font-size: 40px;
   margin-top: 15px;
   padding-left: 30px;
 }
 
 li:last-child {
   border-right: none;
 }
 
 li a {
   display: block;
   color: white;
   text-align: center;
   padding: 25px 30px;
   text-decoration: none;
   font-size: 20px;
 }
 
 li a:hover:not(.active) {
   background-color: #111;
 }
 
 .active {
   background-color: #4CAF50;
 }
 
 #section {
   width: 350px;
   float: center;
   padding: 10px;
 }
 
 #footer {
   background-image: url("pic17.jpg");
   color: white;
   clear: both;
   text-align: center;
   padding: 100px;
 }
 
 #header {
   font-family: "Comic Sans MS", cursive, sans-serif;
 }

JavaScript

var topNav = document.getElementById("topNav"),
  stop = topNav.offsetTop,
  docBody = document.documentElement || document.body.parentNode || document.body,
  hasOffset = window.pageYOffset !== undefined,
  scrollTop;

window.onscroll = function(e) {
  scrollTop = hasOffset ? window.pageYOffset : docBody.scrollTop;
  if (scrollTop >= stop) {
    topNav.className = 'sticky';
  } else {
    topNav.className = '';
  }
}