√ Cara Menciptakan Sajian Melayang Dikala Discroll Di Blog

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

Menu melayang atau bahasa kerenya sajian fixed hingga ketika ini masih menjadi tren di kalangan blogger indonesia. Karen dengan memakai sajian melayang selain menciptakan blog tampil lebih keren dan bagus juga mempermudah pengunjung dalam menjelajahi semua isi situs kita.

Sebaga teladan sajian melayang dapat anda lihat pada sajian navigasi blog ini. nah buat kalian yang minat dengan sajian fixed silahkan coba panduan dibawah ini yang di bangkit memakai CSS dan Javascript.

Agar sajian tersebut tidak membebani loading blog kau menciptakan sajian tersebut dengan memakai j4vascript beberapa baris saja dan tidak memerlukan Jquery Library.

Jadi sajian blog kau nantinya awalnya akan berada di header dan ketika di scroll kebawah akan sajian akan melekat diatas menyerupai blog ini.

Baca Juga:

Cara Membuat Iklan Tautan Adsense Menjadi Banyak

Cara Membuat Daftar Isi Blogger Dengan Berbagai Macam model

Cara Membuat Tombol Download Keren Seperti Jalantikus

Oke mari eksklusif saja kita mulai panduan lengkapnya:

Panduan Membuat Menu Melayang di Blog

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

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

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

#2 Kemudian cari instruksi </body> dan tambahkan instruksi j4vascript 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 dapat dimanfaatkan untuk mengatur elemen lainnya selain menu, contohnya show hide elemen ketika scroll. Contohnya menyerupai CSS berikut

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

Live Demo

Gimana gampang kan menciptakan sajian fixed di blog ketika di scroll? Setelah simpulan membaca postingan ini eksklusif saja pratekan di blog anda. Terimasih dan semoga bermanfaat.

Sumber aciknadzirah.blogspot.com