Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar)

Baca Juga

Berikut ini Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar).

Navigasi menu yang tetap tampil saat halaman discroll ke bawah ini disebut juga static menu (menu statis),  floating menu (menu melayang), atau fixed menu.

Cara membuatnya mudah.

Hanya memasang dua jenis kode, yaitu kode CSS dan Javascript.

Tutorial ini terdiri dari dua, yaitu menjadikan menu yang ada menjadi stricky atau melayang dan satu lagi membuat menu statis --termasuk membuat menunya.

Lihat Demo

Cara Menjadikan Menu Tetap Muncul Saat Discroll 

1. Tema > Edit HTML
2. Copas kode berikut ini di atas kode ]]></b:skin>

.sticky {position: fixed;top: 0;width: 100%;}
.sticky + .content {padding-top: 60px;}

3. Copas kode Javascript berikut ini di atas kode </body>

<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>

Perhatikan kode warna merah (navbar). Ganti dengan nama kode navigasi menu di template Anda, misalnya navmenu, menunav, main-menu, topmenu, dan semisalnya. 

4. Save!

Cara Membuat Menu Tetap Muncul Saat Discroll

Berikut ini Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar) termasuk membuat navigasi menunya. Bisa diterapkan bagi blog Anda yang belum punya menu, seperti template bawaan blogger.

1.Tema >  Edit HTML

2. Copas kode CSS berikut ini di atas kode ]]></b:skin>

/* Style the navbar */
#navbar {
  overflow: hidden;
  background-color: #333;
}
/* Navbar links */
#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px;
  text-decoration: none;
}
/* Page content */
.content {
  padding: 16px;
}
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}
/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}

3. Copas kode HTML berikut ini di bawah kode </header> atau di atas kode seperti <div id='content-wrapper'>  atau <div id='main-wrapper'>

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

4. Copas kode javascript berikut ini di atas kode </body>

<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("myTopnav");
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset >= sticky) {
    navbar.classList.add("sticky")
  } else {
    navbar.classList.remove("sticky");
  }
}
</script>

5. Save! Simpan Template.

Demikian Cara Membuat Menu Tetap Muncul Saat Discroll (Sticky Navbar). Good Luck & Happy Blogging! (www.contohblog.com).

Sumber