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

 

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

ARTIKEL TERBARU