Fixed Navigation bars

In CSS the fixed navigation bar remains in a fixed position on the screen while the rest of the page content scrolls.
This is used to provide easy access to navigation links as users scroll through a web page.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: palevioletred;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: peru;
}

.active {
  background-color: plum;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>

<div style="padding:20px;margin-top:30px;background-color:palegreen;height:1500px;">
  <h1>Fixed Top Navigation Bar</h1>
  <h2>Scroll this page to see the effect</h2>
  <h2>The navigation bar will stay at the top of the page while scrolling</h2>

  <p>Welcome to Quipoin.</p>
  

</body>
</html>

Output:

Sticky Navbar

A sticky navigation bar in CSS is a design pattern where the navigation bar starts as part of the normal document flow and then becomes fixed to the top of the viewport as the user scrolls down the page.
This navigation style is often used to provide easy access to navigation links and is an excellent choice for long web pages.

Example:

<!DOCTYPE html>
<html>
   <head>
      <style>
         ul {
            list-style-type: none;
            position: sticky;
            overflow: hidden;
            top: 0;
            width: 100%;
         }
         li {
            float: left;
            border-right: 1px solid white;
         }
         li a {
            display: block;
            padding: 8px;
            background-color: orange;
         }
         li:last-child {
            border-right: none;
         }
         div {
            padding:5px;
            margin-top:5px;
            background-color:white;
            height:1000px;
         }
      </style>
   </head>

   <body>
      <ul>
         <li><a href = "#home">Home</a></li>
         <li><a href = "#news">News</a></li>
         <li><a href = "#contact">Contact</a></li>
         <li><a href = "#about">About</a></li>
      </ul>
      <div>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
         <p>Adding demo text to check fixed menu.</p>
      </div>
   </body>
</html>

Output: