Membuat Navbar Sticky Navbar yang Bisa Sembunyi Saat Scroll Bawah dan Muncul Saat Scroll ke Atas
Javascript untuk membuat sticky navbar sembunyi saat scroll ke bawah lalu otomatis saat discroll sedikit ke atas.
mrfdn.com - Mungkin anda pernah terpikir untuk membuat responsif navbar yang bisa sembunyi saat scroll ke bawah lalu saat scroll layar ke atas navbar tersebut bisa munucl tanpa scroll full ke atas layar.
Ini bisa dipecahkan dengan menjalankan beberapa baris javascript DOM.
Misalnya navbar saya tempatkan di dalam sebuah header seperti ini.
<header>
<nav class="container">
<a href="{{ .Site.BaseURL }}" title="{{ .Site.Title }}">
<img src="{{ .Site.Params.logo | absURL }}" class="logo" alt="{{ .Site.Title }}" width="60" height="60" />
<span class="hidden"> {{ .Site.Title }}<span>
</a>
<ul>
{{ with .Site.Menus.main }}
{{ range .}}
<li>
<a href="{{ .URL | absURL }}">{{ .Name }}</a>
</li>
{{ end }}
{{ end }}
<li>
<!-- search -->
<a href="/search" aria-label="search button">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16">
<path
d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z" />
</svg>
</a>
</li>
</ul>
</nav>
</header>
Lalu set css untuk header menjadi fixed.
header {
position: fixed;
top:0;
background: #fff;
transition: all .5s;
z-index: 1;
}
Kemudian saya set sebuah javascript untuk menangkap elemen header tersebut lalu menjalankan fungsi.
let prevScrollpos = window.pageYOffset;
window.onscroll = function() {
let currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.querySelector('header').style.cssText = "top: 0; margin-bottom: 3em; padding: 3em 0; z-index: 1";
} else {
document.querySelector('header').style.cssText = "top: -30em;";
}
prevScrollpos = currentScrollPos;
}
Setelah dijalankan sekarang saya bisa mendapatkan fitur navbar yang sembunyi saat scroll ke bawah lalu muncul saat scroll sedikit ke atas.
Semoga bermanfaatsembunyi saat scroll ke bawah lalu muncul saat scroll sedikit ke atas.
Semoga bermanfaat.
