Mengubah Menu Navigasi Menjadi Melayang Ketika Discroll

Menu navigasi yang biasa kita lihat terdapat di bagian atas Blog adalah menu yang menjadi acuan pengunjung dalam menjelajahi Blog kita. Saya akan membagikan cara membuat menu navigasi tersebut menjadi melayang ketika dicsroll. Jadi hasilnya nanti menu navigasi akan selalu mengikuti ke mana pun layar digulir dan akan terdapat di bagian atas pada layar. Dan ketika kembali digulir ke atas, ia tidak akan mentok melebihi tempatnya semula.
Sehingga ketika pengunjung telah membaca artikel sampai ke bagian paling bawah, dan ingin mengakses menu navigasi, tidak perlu lagi repot-repot menggulir layar ke atas.

Jadi dengan penjelasan tadi sobat harus mengerti. Pembahasan kali ini khusus untuk Blog yang telah memiliki menu navigasi pada template-nya. Dan nantinya menu navigasi yang telah ada tersebut akan dibuat melayang. Jadi jika dalam Blog sobat belum terdapat menu navigasi, sobat harus membuatnya terlebih dahulu atau langsung saja Membuat Menu Navigasi Melayang di Blog.

Perhatikan screenshot di bawah ini. Menu navigasi yang telah ada dan tadinya selalu diam, menjadi melayang.

Oke, kita langsung saja ke pembahasan. Cara yang saya bagikan ini bersumber dari Blog KangIsmet. Siapa yang tidak tau? Cara yang diberikan sangat simple dan akan saya sampaikan sesingkat-singkatnya.

1. Login ke akun Blogger sobat.
2. Masuk ke bagian Temaplate dan klik Edit HTML.
3. Dengan tombol ctrl + F, cari kode </body> dan letakan kode berikut di atas kode </body>.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu #NavbarMenu
    var stickyNavTop = $('#NavbarMenu').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya      
        if (scrollTop > stickyNavTop) {
            $('#NavbarMenu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#NavbarMenu').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. Ubah kode #NavbarMenu dengan kode elemen menu navigasi pada Blog sobat.
5. Klik Simpan Template.

Sebenarnya sampai di sini langkah-langkah untuk membuatnya telah selesai. Namun saya yakin bagi pemula pasti akan merasa bingung dalam mengganti kode #NavbarMenu. Mungkin dia belum mengetahui kode elemen menu navigasi pada Blog-nya. Maka saya akan mengembangkan lagi pembahasan ini.

Cara Mengetahui Kode Elemen Menu Navigasi

1. Perhatikan menu navigasi pada Blog sobat. Contoh:

Salah satu menu di dalamnya adalah "Daftar Isi"

2. Masuk ke Blogger >> Template >> Edit HTML.
3. Cari kata "Daftar Isi" dan temukan script-script yang mirip seperti berikut.

4. Cari id atau class yang terdapat di paling atas pada kode html. Maka itulah kode elemen pada menu navigasi Blog sobat.

Maka selanjutnya pada script yang saya berikan sobat ganti kode #NavbarMenu dengan kode elemen menu navigasi  yang telah sobat ketahui.