Membuat Sajian Melayang (Sticky) Pure Javascript

Menu Navigation sticky

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 saat halaman di scroll memakai javascript

Mungkin sudah banyak yang share tutorial ibarat 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 saat di scroll dan Berhenti di atas Footer

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 :)

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 sajian 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 agar bermanfaat. Apabila ada yang tidak di mengerti, silahkan bertanya di kolom komentar :) Membuat sajian melayang saat di scroll, membuat sajian sticky


Sumber https://mastamvan.blogspot.com/

0 Response to "Membuat Sajian Melayang (Sticky) Pure Javascript"

Post a Comment

Silahkan berkomentar.
Perhatian! Komentar yang mengandung spam tidak akan di terima.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel