[Ask] Cara Membuat Sticky Menu Yang Mudah

Gan Gimana Bikin Sticky Menu Sih Yang Simple

: Ashshauri : rizk*******@gmail.com : None

: Mohon Bantuannya Gan Beberpa Link Lain G Jelas Bgt

Sticky Menu itu memang simple kok codenya gan ^_^

Contoh

Scroll Kebawah

HomeMenu 1Menu 2

Sticky Menu menggunakan CSS dan Javascript

Menu navbar akan tetap diatas
Hanya text tambahan agar bisa di scroll
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|Kurang panjang nih...?
|
|
|
|
|
|
|
|
|
|
|
|
|
Bagian panjang Kebawah agar bisa di scroll;. |
|
|
|
|
|
|
|
|
|
|
|
|
Bagian akhir lumayan panjang scroll;.

sebagai contoh ane ingin menjadikan suatu menu dengan id = menuTetap menjadi sticky menu,
code dasar menu ane itu seperti ini :

<div id="menuTetap">
  <a href="#">Home</a>
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
</div>

Untuk menjadikannya sticky menu, dibawah code tersebut ane tambahkan code CSS (style) dan javascript,
berikut ini penampakan codenya :

<style>
#menuTetap {
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.diam {position: fixed;top: 0;}
</style>

<script>
var idMenu = document.getElementById("menuTetap");
var diam = idMenu.offsetTop;
window.onscroll = function() {
    if (window.pageYOffset >= diam) {
        idMenu.classList.add("diam")
      }
    else {
        idMenu.classList.remove("diam");
      }
};
</script> 

Sebenarnya bisa hanya dengan CODE CSS (style),
tapi code itu tidak akan bekerja pada browser Internet Explorer.
Jadi sebagai solusinya ane gunakan javascript diatas ^_^

Jadi code ane sekarang jadi seperti ini :

<div id="menuTetap">
  <a href="#">Home</a>
  <a href="#">Menu 1</a>
  <a href="#">Menu 2</a>
</div>
<style>
#menuTetap {
    overflow: hidden;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}
.diam {position: fixed;top: 0;}
</style>
<script>
var idMenu = document.getElementById("menuTetap");
var diam = idMenu.offsetTop;
window.onscroll = function() {
    if (window.pageYOffset >= diam) {
        idMenu.classList.add("diam")
      }
    else {
        idMenu.classList.remove("diam");
      }
};
</script>

Yups cuma begitu saja gan, semoga bermanfaat ya,
bila ada yang kurang paham silahkan berikan komentar dibawah ^_^

---

---