Cara Membuat Header Blog atau Navigasi menu Sticky Atau Tetap di Tempat Saat di Scroll Kebawah

Membuat Header blog sticky atau fixed saat di scroll kebawah membuat blog kita terlihat propesional dan keren. Header sticky juga banyak di jumpai di website ternama salah satunya adalah Jalantikus. Untuk membuat Header blog Sticky pun ada beberapa cara mulai dari membuat ulang struktur kode script header blog, menambahkan kode script tertentu atau dengan menimpa gaya header lama dengan yang baru dengan bantuan css. Tapi itu terbilang ribet dan membutuhkan waktu agak lama untuk melakukannya dimanah lagi kita harus mengedit, mengganti ataupu menambah script ke html blog kita.

Jadi agan disini mau beri cara yang paling mudah untuk membuat header blog fixed atau sticky saat di scroll kebawah.

Pertama-tama salin dan masukkan kode script dibawah ini ke Tema => Edit Html lalu tempatkan kode script sticky dibawah ini tepat di atas kode </body>

<script>
    //<![CDATA[
    bs_makeSticky("nav");
    function bs_makeSticky(elem) {
        var bs_sticky = document.getElementById(elem);
        var scrollee = document.createElement("div");
        bs_sticky.parentNode.insertBefore(scrollee, bs_sticky);
        var width = bs_sticky.offsetWidth;
        var iniClass = bs_sticky.className + ' bs_sticky';
        window.addEventListener('scroll', bs_sticking, false);
        function bs_sticking() {
            var rect = scrollee.getBoundingClientRect();
            if (rect.top < 0) {
                bs_sticky.className = iniClass + ' bs_sticking';
                bs_sticky.style.width = width + "px";
            } else {
                bs_sticky.className = iniClass;
            }
        }
    }
    //]]>
    </script>
    <style>
    .bs_sticking {position:fixed; top:0; z-index:9999;}
    </style>

Ganti "nav" dengan id header blog anda atau nama header blog anda. Nama setiap id header template berbeda-beda tapi fungsinya sama saja jadi untuk menemukan id header blog anda tinggal pergi ke Edit Html blog anda lalu ctrl+f dan masukkan nav id lalu enter seperti gambar di bawah ini.


Setelah ketemu ganti => bs_makeSticky("nav"); dengan bs_makeSticky("id header blog kamu"); ganti pada kode javascript sticky yang saya berikan di atas.

Jika kalian masih bingung mencari id header blog anda, ada cara paling gampang yaitu pada halaman blog anda klik kanan pada header blog anda lalu pilih Inspect elemen lalu lihat nama id header kamu yang berada tepat didepan id contoh seperti ini nav id ="nav".


Setelah itu klik simpan template dan lihat hasilnya.

Share It