Cara Membuat Menu Melayang Ketika Discroll di Blog

  • Whatsapp
Cara Membuat Menu di Blog Melayang
5/5 (2)

LAPAKLAMA.COM | Cara Membuat Menu Melayang Ketika Discroll Dengan CSS Dan Javascript.

Menu melayang atau bahasa kerenya menu fixed sampai saat ini masih menjadi tren di kalangan blogger indonesia. Karen dengan menggunakan menu melayang selain membuat blog tampil lebih keren dan cantik juga mempermudah pengunjung dalam menjelajahi semua isi situs kita.

Sebaga contoh menu melayang bisa anda lihat pada menu navigasi blog ini. nah buat kalian yang minat dengan menu fixed silahkan coba panduan dibawah ini yang di bangun menggunakan CSS dan Javascript.

Agar menu tersebut tidak membebani loading blog kamu membuat menu tersebut dengan menggunakan javascript beberapa baris saja dan tidak memerlukan Jquery Library.

Jadi menu blog kamu nantinya awalnya akan berada di header dan ketika di scroll kebawah akan menu akan menempel diatas seperti blog ini.

Baca Juga:

Oke mari langsung saja kita mulai panduan lengkapnya:

Panduan Membuat Menu Melayang di Blog

Dipostingan ini kami tidak membagikan cara membuat menu. namun disini kami hanya membagikan cara membuat menu melayang saja jadi menu yang akan kita buat akan tetap menggunakan menu blog kalian.

#1. Masuk kehalaman dasboard blogger kamu, kemudian masuk di halaman Tema > Edit HTML dan tambahkan elemen div berikut untuk membungkus kode HTML menu blog Anda.

<div id='fixedmenu'>
KODE HTML MENU BLOG ANDA DI SINI
</div>

#2 Kemudian cari kode </body> dan tambahkan kode javascript ini di atasnya.

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

#3. Sekarang tambahkan style pada elemen ketika elemen menyentuh sisi atas dan classditambahkan pada body agar elemen menjadi melayang.

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

#4. 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;}

Live Demo

Gimana mudah kan membuat menu fixed di blog saat di scroll? Setelah selesai membaca postingan ini langsung saja pratekan di blog anda. Terimasih dan semoga bermanfaat.

Nilai Kualitas Konten

Pos terkait

Loading...

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *