Cara Membuat Menu Melayang (Sticky Menu on Scroll)

Kesempatan yang berbahagia ini, Amirs ID akan memberikan tutorial yang berkaitan dengan blog yaitu Cara Membuat Menu Melayang (Sticky Menu on Scroll). Maksud dari menu melayang (sticky menu on scroll) yaitu posisi menu yang tetap berada diatas meski pembaca telah menscroll halaman ke bawah. Tentunya dengan adanya fasilitas tersebut mengefesiensikan waktu dalam melakukan navigasi. Karena pembaca tidak perlu mengarahkan scroll keatas lagi.

Dalam membuat menu melayang (sticky menu on scroll) ini terbilang cukup mudah, sebab kalian hanya perlu menambahkan sedikit script dibagian template blog kalian. Langsung saja, silahkan kalian ikuti langkah-langkahnya seperti dibawah ini.

Result
Click here

Cara Membuat Menu Melayang 

1. Silahkan masuk ke akun blog kalian terlebih dahulu di www.blogger.com

2. Klik pada bagian Template > Edit HTML

3. Cari kode </body> setelah ketemu, silahkan kalian tambahkan kode JavaScript dibawah ini tepat berada di atas kode </body>

 <script type="text/javascript">
//<![CDATA[
//AMIRS ID | Sticky Menu 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> 

4.  Setelah itu, carilah kode </head>  atau </style> dan tambahkan kode CSS dibawah ini tepat berada di atas kode </head> atau </style>

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

5. Selanjutnya klik Simpan Tema

Seperti itulah tadi Cara Membuat Menu Melayang (Sticky Menu on Scroll) di blog, semoga bermanfaat dan dapat membantu kebutuhan teman-teman dalam hal ngeblog. Sekian dan terimakasih.