MEMBUAT NAVIGASI MENU MELAYANG (STICKY) PURE JAVASCRIPT

MEMBUAT NAVIGASI MENU MELAYANG (STICKY) PURE JAVASCRIPT - pada kesempatan kali ini saya akan sharing trik buat kalian yang ingin merubah menunya menjadi melayang saat halaman di scroll memakai javascript Mungkin sudah banyak yang share tutorial menyerupai ini, ada yang memakai pure css, jQuery tapi apa salahnya saya juga share artikel yang sama namun tutorial yang berbeda.

RESULT

Untuk memasang nya sangat mudah, mari simak langkah langkah berikut ini.

CARA MEMBUAT NAVIGASI MENU MELAYANG (STICKY) PURE JAVASCRIPT

Masuk ke akun Blogger kalian
Masuk ke Tema dan Edit HTML
Cari kode</body> jika sudah ketemu lalu copy java script dibawah ini tepat diatas kode tersebut:

JS
<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 dari template kalian. jika tidak kalian bisa menambahkan class="sticky" pada HTML kalian.

terakhir cari kode </head> jika sudah ketemu lau masukan css dibawah ini tepat diatas kode tersebut:

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

Jangan lupa kalian ganti kata .sticky pada javascriptnya, ganti tulisan .sticky pada css nya

Lalu Kalian save

Cukup sekian Artikel MEMBUAT NAVIGASI MENU MELAYANG (STICKY) PURE JAVASCRIPT Semoga bermanfaat, jika masih ada kesusahan dalam mencoba bisa komen dibawah. Terimakasih