Cara Membuat Menu Navigasi Blog Melayang Saat Halaman Discroll ke Bawah

Membuat Blog Edukatif Part 2: Menu Navigasi Melayang

Sahabat. Sebelum pulang kerja, Ane sempatkan untuk membagikan cara mudah membuat menu navigasi melayang (tetap muncul) saat halaman di scroll (ditarik ke bawah). Artikel ini saya maksudkan untuk melengkapi artikel membuat blog menjadi semakin edikatif informatif kepada pembaca.
Jika Sobat menggeser halaman blog ini ke bawah, halaman menu navigasi akan tetap muncul dan melayang. Tentu hal ini akan sangat mempermudah rekan-rekan pembaca setia.

Pentingnya Halaman Navigasi Menu Tetap Muncul

Ketika Sobat sedang enak-enaknya membaca artikel dari blog ini, tiba-tiba di bagian akhir memerlukan bantuan dari link internal yang berada di menu navigasi. Maka langkah yang paling mungkin terjadi adalah menggeser scrool ke atas. Hal ini tentu sedikit banyak mengurangi kenyamanan pengunjung. Sehingga, dengan tips inilah akan mempermudah rekan-rekan dalam membaca ulasan-ulasan yang kami berikan.

Langkah-langkah Membuat Menu Navigasi Tetap Melayang

1. Berdo'a

2. Masuk akun blogger > Template > Edit Html

3. Copy paste kode di bawah ini tepat di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('#nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('#nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('#nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. Ganti kode elemen warna biru di atas #nav dengan kode elemen menu navigasi blog Sobat. Biasanya berupa kode .nav atau #menu atau .menu

5. Save template

6. Baca Hamdallah, aamiin.

OK Guys. Selamat mencoba and happy blogging.

(http://forumblogindo.blogspot.com/).*


Source:
http://www.contohblog.com/2014/05/menu-navigasi-blog-tetap-muncul-melayang.html