[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

Cara Membuat Sticky Menu Yang Mudah

Sticky Menu itu memang simple kok codenya gan ^_^

Contoh


Scroll Kebawah

Sticky Menu menggunakan CSS dan Javascript

The navbar will stick to the top when you reach its scroll position.
Some text to enable scrolling.. 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.
Some text to enable scrolling.. 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.
Some text to enable scrolling.. 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.
Some text to enable scrolling.. 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.
Some text to enable scrolling.. 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.
Some text to enable scrolling.. 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.
Some text to enable scrolling.. 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.

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


Related Artikel [Ask] Cara Membuat Sticky Menu Yang Mudah

No comments:

Post a Comment