Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript

Ditulis oleh: Adhy Suryadi

Ditulis pada: 4/25/2019

Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript - Menu fixed atau menu melayang sampai saat ini masih menjadi primadona para Blogger. Dengan menu melayang, maka keterlihatan menu dan kesempatan diakses pengunjung menjadi lebih banyak dan lebih mudah dieksplore.

Untuk itu, untuk melangkapi tutorial yang ada di Kompi Ajaib, saya akan membagikan cara membuat fixed menu atau menu melayang dengan CSS dan Javascript.

Javascript yang digunakannya pun hanya beberapa baris saja dan tidak memerlukan Jquery Library sehingga sangat ringan untuk digunakan di blog.

Trik jenis ini sangat cocok untuk menu yang posisi awalnya berada di bawah header. Artinya, posisi awal menu tidak menempel di atas, seperti gambar berikut:

Jika ternyata posisi awal menu blog Anda sudah berada di atas, itu artinya Anda tidak memerlukan trik ini. Untuk membuat menu melayang yang posisi awalnya sudah berada di atas, Anda hanya perlu pakai CSS saja tanpa javascript ataupun jquey, sehingga akan lebih ringan tanpa beban script.

Baiklah, kita mulai untuk membuat menu melayang ketika discroll dengan CSS dan javascript.

Di sini saya tidak memberikan cara membuat menunya, hanya membuat menunya menjadi melayang saja. Jadi untuk menunya tetap menggunakan menu yang sudah ada di blog Anda masing-masing.

Langkah Pertama

Tambahkan elemen div berikut untuk membungkus kode HTML menu blog Anda.

<div id='fixedmenu'>

KODE HTML MENU BLOG ANDA DI SINI

</div>

Kode div tersebut untuk ditandai oleh javascript untuk mendapatkan tinggi elemen dari tepi atas untuk mengeksekusi tindakan selanjutnya ketika elemen tersebut menyentuh tepi atas ketika discroll.

Langkah Kedua

Tambahkan beberapa baris javascript ini di atas kode </body>

<script>

//<![CDATA[

const nav = document.querySelector('#fixedmenu');

const navTop = nav.offsetTop;



function stickyNavigation() {

  console.log('navTop = ' + navTop);

  console.log('scrollY = ' + window.scrollY);



  if (window.scrollY >= navTop) {

    document.body.classList.add('fixed-nav');

  } else {

    document.body.classList.remove('fixed-nav');

  }

}



window.addEventListener('scroll', stickyNavigation);

//]]>

</script>

Javascript di atas akan menambahkan class fixed-nav pada body ketika elemen yang ditandai menyentuh tepi atas dan ketika elemen kembali ke posisi semula maka class pada body akan dihilangkan.

Langkah Ketiga

Kini saatnya memberikan style pada elemen ketika elemen menyentuh sisi atas dan class ditambahkan pada body agar elemen menjadi melayang.

.fixed-nav #fixedmenu{position:fixed;top:0;left:0;width:100%;z-index:999;}

Anda bisa menambahkan style lainnya pada CSS di atas untuk mengatur tampilan ketika menu melayang.

Penambahan class pada body ini juga bisa dimanfaatkan untuk mengatur elemen lainnya selain menu, misalnya show hide elemen ketika scroll. Contohnya seperti CSS berikut

.element{display:none;}

.fixed-nav .element{display:block;}

Bagaimana, mudah bukan?

Kini saatnya Anda untuk mencoba membuat menu blog Anda menjadi melayang. Silahkan kembangkan dan sesuaikan dengan blog Anda.

Selamat mencoba.