Membuat Sajian 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 memperlihatkan trik buat kalian yang ingin merubah menunya menjadi melayang dikala 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 perihal cara menciptakan widget melayang dikala di scroll dan Berhenti di atas Footer

Result

Untuk pemasangan hidangan 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 aba-aba </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 aba-aba .sticky dengan class dari HTML hidangan kalian atau
kalo ga ada Classnya Kalian dapat menambahkan class='sticky' di HTMLnya.

• Terakhir cari aba-aba </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 perihal Tutorial Cara Membuat Menu Navigation Bar Melayang ( Sticky ) Ketika Di Scroll ini supaya bermanfaat. Apabila ada yang tidak di mengerti, silahkan bertanya di kolom komentar :) Membuat hidangan melayang dikala di scroll, membuat hidangan sticky