Cara membuat: navigasi bar yang tetap

Bagaimana membuat navigasi yang lepas kaki

Tahap pertama - Tambahkan HTML:

Buat navigasi:

<div id="navbar">
  <a href="#home">Beranda</a>
  <a href="#news">Berita</a>
  <a href="#contact">Hubungi</a>
</div>

Tahap kedua - Tambahkan CSS:

Atur gaya navigasi:

/* Atur gaya navigasi */
#navbar {
  overflow: hidden;
  background-color: #333;
}
/* Tambahkan gaya untuk tautan navigasi */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
/* Konten halaman */
.content {
  padding: 16px;
}
/* Saat mencapai posisi gerakannya, tambahkan kelas "sticky" ke navigasi melalui JS */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/* Tambahkan beberapa padding atas untuk konten halaman, untuk mencegah gerakan cepat yang mendadak (karena navigasi di posisi atas halaman (position:fixed dan top:0)) */
.sticky + .content {
  padding-top: 60px;
}

Tahap ketiga - Tambahkan JavaScript:

// Eksekusi myFunction saat pengguna menggulir halaman
window.onscroll = function() {myFunction()};
// Ambil navigasi
var navbar = document.getElementById("navbar");
// Ambil posisi offset navigasi
var sticky = navbar.offsetTop;
// Saat Anda mencapai posisi gerakan navigasi, tambahkan kelas "sticky". Saat Anda meninggalkan posisi gerakan, hapus kelas "sticky".
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  else {
    navbar.classList.remove("sticky");
  }
}

Coba sendiri