Cara Membuat Menu Navigasi Sticky

Pelajari cara membuat bar navigasi sticky/affix dengan CSS dan JavaScript.

Contoh:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
  margin: 0;
  font-size: 28px;
  font-family: Arial, Helvetica, sans-serif;
}

.header {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

#navbar {
  overflow: hidden;
  background-color: #333;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

#navbar a.active {
  background-color: #4CAF50;
  color: white;
}

.content {
  padding: 16px;
}

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

.sticky + .content {
  padding-top: 60px;
}
</style>
</head>
<body>

<div class="header">
  <h2>Scroll Down</h2>
  <p>Scroll down to see the sticky effect.</p>
</div>

<div id="navbar">
  <a class="active" href="javascript:void(0)">Home</a>
  <a href="javascript:void(0)">News</a>
  <a href="javascript:void(0)">Contact</a>
</div>

<div class="content">
  <h3>Contoh Navigasi Sticky</h3>
  <p>Bar navigasi akan menempel di atas saat mencapai posisi gulirnya.</p>
  <p>Teks untuk mengaktifkan pengguliran.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Teks untuk mengaktifkan pengguliran.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Teks untuk mengaktifkan pengguliran.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Teks untuk mengaktifkan pengguliran.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Teks untuk mengaktifkan pengguliran.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Teks untuk mengaktifkan pengguliran.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
  <p>Teks untuk mengaktifkan pengguliran.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>

<script>
window.onscroll = function() {myFunction()};

var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

</body>
</html>

Section Artikel

1 Cara Membuat Navbar Sticky

Cara Membuat Navbar Sticky

Langkah 1) Tambahkan HTML

Buat bilah navigasi.

Contoh:

<div id="navbar">
  <a href="#home">Home</a>
  <a href="#news">News</a>
  <a href="#contact">Contact</a>
</div>

Langkah 2) Tambahkan CSS

Memberi style bar navigasi

Contoh:

/* Style navbar */
#navbar {
  overflow: hidden;
  background-color: #333;
}

/* Link Navbar */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}

/* Halaman konten */
.content {
  padding: 16px;
}

/* Kelas sticky ditambahkan ke navbar dengan JS saat mencapai posisi gulirnya */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Tambahkan beberapa padding atas ke konten halaman untuk mencegah gerakan cepat tiba-tiba (karena bilah navigasi mendapat posisi baru di bagian atas halaman (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

Langkah 3) Tambahkan JavaScript

Contoh:

// Saat pengguna menggulir halaman, jalankan myFunction
window.onscroll = function() {myFunction()};

// Dapatkan bar navigasi
var navbar = document.getElementById("navbar");

// Dapatkan posisi offset bar navigasi
var sticky = navbar.offsetTop;

// Tambahkan kelas sticky ke bar navigasi saat Anda mencapai posisi gulirnya. Hapus "sticky" saat Anda meninggalkan posisi gulir
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}

How To

Cara Membuat Menu Navigasi Sticky

Cara Membuat Navbar Sticky

Langkah 1) Tambahkan HTML

Langkah 2) Tambahkan CSS

Langkah 3) Tambahkan JavaScript

Cara Membuat Menu Navigasi Mengecil saar di Scroll

Cara Membuat Navbar pada Gambar

You may also like