Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

Cara menampilkan menu statis, sticky, atau melayang (floating).


KALI ini  berbagi tentang cara membuat Menu Navigasi blog statis yang tetap muncul (melayang) di bagian atas, saat halaman discroll ke bawah.

Contohnya? Ya... blog ini! Coba scroll ke bawah, lalu lihatlah... menunya tetap ada di bagian atas 'kan?

Menu Navigasi (Navigation Menu) yaitu menu blog yang biasa ada di deretan Home, About, dan seterusnya. Menu navigasi sangat penting bagi pengunjung agar bisa dengan mudah "berselancar" (surf) dan "baca-baca" (browse) blog kita lebih lama.

Awalnya sih "ngiri" sama menu navigasi situs Hongkiat. Saat kita scroll, menunya tetap muncul di atas. Setelah "search" di sana, ternyata Hongkiat berbagi tips cara membuatnya: Sticky Position (Bar) With CSS Or JQuery.

Saya hanya ambil kodenya saja agar Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll. Cara membuatnya mudah banget.

Cara Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll

1. Template > Edit HTML
2. Cari (CTRL+F) kode </body>
3. Copy kode berikut ini dan Paste 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. JANGAN LUPA! Sebelum klik "Save", Ganti elemen .nav dengan elemen/kode yang menjadi Navigasi Menu blog Anda. Di blog CB (New Johny Wuss), kodenya bernama #menu, sehingga kodenya menjadi:

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

Anda pengguna template New Johny Wuss, yang ingin Membuat Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll, tinggal COPAS saja kode yang digunakan template New Johny Wuss di atas. Tapi jangan lupa, ubah angka 99% di bagian #menu{background:#343434;width:99%;margin:0 5px 0 5px;color menjadi 950px.

Good Luck dan Happy Blogging!