Membuat Hidangan 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 menawarkan 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 :) . Sebelumnya saya juga sudah pernah share artikel wacana cara menciptakan widget melayang saat di scroll dan Berhenti di atas Footer

Result

Untuk pemasangan sajian 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 arahan </body>, sesudah ketemu masukan JavaScript dibawah ini sempurna diatasnya

 <script type="text/javascript"> //<![CDATA[ // | 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 arahan .sticky dengan class dari HTML sajian kalian atau
kalo ga ada Classnya Kalian dapat menambahkan class='sticky' di HTMLnya.

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

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

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

• Kalo sudah, tinggal save dan lihat hasilnya

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

Share this post