Membuat Menu 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 memberikan trik buat kalian yang ingin merubah menunya menjadi melayang ketika halaman di scroll menggunakan javascript

Mungkin sudah banyak yang share tutorial seperti ini, ada yang menggunakan pure css, jQuery tapi apa salahnya saya juga share artikel yang sama namun tutorial yang berbeda :) . Sebelumnya saya juga sudah pernah share artikel tentang cara membuat widget melayang ketika di scroll dan Berhenti di atas Footer

Untuk pemasangan menu 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 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

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

6 komentar
  1. thanks mas...akhir.e tutornya muncul

    ReplyDelete
  2. bikin tutorial widget berlangganan via email kaya diblog ini dong bang..

    ReplyDelete
  3. Mas, minta buatin tutorialnya donk untuk buat demo dari jsfiddle itu gimana ya mas?

    ReplyDelete
    Replies
    1. Caranya mudah gan..
      Tinggal buka linknya https://jsfiddle.net

      Bikin kontennya, jalankan scriptnya terus save
      n
      done (y)

      Delete
  4. gan, kalau cara header blog supaya melayang atau sticky gitu kyk mana ya gan, tau kah caranya?

    ReplyDelete