Membuat Menu Melayang (Sticky) Pure Javascript

Tutorial Cara Membuat Menu Navigation Melayang Dengan Javascript

Cara Membuat Menu Melayang Ketika Di Scroll (Sticky Menu), pada kesempatan kali ini saya akan memberikan trik buat kalian yang ingin merubah menunya menjadi melayang ketika halaman di scroll menggunakan javascript

Mungkin sudah banyak yang share tutorial seperti ini, ada yang menggunakan pure css, jQuery tapi apa salahnya saya juga share artikel yang sama namun tutorial yang berbeda :) . Sebelumnya saya juga sudah pernah share artikel tentang cara membuat widget melayang ketika di scroll dan Berhenti di atas Footer

Result

Untuk pemasangan menu melayang ini cukup mudah, kalian tinggal ikuti langkah demi langkah pada tutorial ini. Tapi jangan lupa mampir juga ke postingan lainnya ya :)

Tutorial Blogger Lainnya :

• Mempercepat Loading Blog Dengan LazyLoad Pure JavaScript

• Cara Menambahkan Icon di Menu Bar dengan Font Awesome

• Membuat Sitemap/Daftar Isi Dengan Fitur Search, Filter Daftar Post

Cara Membuat Menu Melayang Ketika Di Scroll (Sticky) Dengan Javascript

• Silahkan login ke akun blogger kalian

• Lalu cari kode </body>, setelah ketemu masukan JavaScript dibawah ini tepat diatasnya

<script type="text/javascript">
//<![CDATA[
//Mas Tamvan | add Class on Scroll
function throttle(fn, delay) {
  var last = undefined;
  var timer = undefined;

  return function () {
    var now = +new Date();

    if (last && now < last + delay) {
      clearTimeout(timer);

      timer = setTimeout(function () {
        last = now;
        fn();
      }, delay);
    } else {
      last = now;
      fn();
    }
  };
}

function onScroll() {
  if (window.pageYOffset) {
    $$html.classList.add('is-active');
  } else {
    $$html.classList.remove('is-active');
  }
}

var $$html = document.querySelector('.sticky'); //.sticky Ganti Dengan Class di Menu Kalian

window.addEventListener('scroll', throttle(onScroll,25));
//]]>
</script>

Silahkan ganti kode .sticky dengan class dari HTML menu kalian atau
kalo ga ada Classnya Kalian bisa menambahkan class='sticky' di HTMLnya.

• Terakhir cari kode </head>, kalo udah ketemu masukan css dibawah ini tepat diatasnya.

<style type='text/css'>
.sticky.is-active{
  position:fixed;
  top: 0;
  left: 0;
  width: 100%
}
</style>

Jangan lupa, kalo kalian merubah tulisan .sticky pada javascriptnya, ganti juga tulisan .sticky pada CSSnya

• Kalo sudah, tinggal save dan lihat hasilnya

Cukup sekian artikel tentang Tutorial Cara Membuat Menu Navigation Bar Melayang ( Sticky ) Ketika Di Scroll ini semoga bermanfaat. Apabila ada yang tidak di mengerti, silahkan bertanya di kolom komentar :) Membuat menu melayang ketika di scroll, membuat menu sticky