Cara Memasang Menu Navigasi Menjadi Melayang (fixed) Saat diScroll

Bagian terpenting yang digunakan pengunjung untuk menjelajahi Blog adalah Menu navigasi, kebanyakan para sahabat blogger memasang menu navigasi ini dibagian atas halaman header blog, sehingga jika pengunjung membaca artikel dan menggulir halaman, jadi posisi menu akan terus berda di bagian paling atas halam walaupun halaman digulirl ke bawah.

Dengan membuat Menu navigasi tersebut tentunya para dapat memudahkan para pengunjung menggulir halaman blog kita tanpa harus naik turun scroll, menu navigasi tersebut normal, jika akan melayang ketika mouse discroll ke bawah. Kamu bisa memasang menu navigasi ini dengan cara yang akan bahas kali ini.

Langkah 1; Cara membuat menu navigasi di Blog menjadi melayang (fixed)

Pada bagian dashboard Blog masuk ➪tema ➪edit Html

Dengan cara ctrl+F silahkan cari kode </body> kemudian letakan kode berikut diatas atau sebelum kode </body>

Code script

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

[script kode by: http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html]

Cara pasang

Pertama kamu harus mengetahui id elemen menu navigasi di Blog kamu. Pad dashboar masuk ke menu-tema-edit HTML.

Perhatikan salah satu menu/konten pada menu navigasi yang saya lingkarin gambar di bawah ini.

kemudian ganti kode navitions dengan script di atas tadi.

Menu navigasi menjadi melayang dan hanya muncul setelah halaman digulir

Jika ingin membuat menu navigasi di Blog kamu, jika setelah discroll gunakan script dibwah ini; Cara memasangnya sama dengan cara yang telah saya jelaskan sebelumnya.

Code script

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

[script kode by: http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html]

Demikianlah hasil Cara membuat Menu Navigasi Menjadi Melayang (fixed) Saat diScroll, jika ada kekurangan dan ingin bertanya mohon, komentar di bawah saya sangat senang hati😎

Tekno Den

Cara Memasang Menu Navigasi Menjadi Melayang (fixed) Saat diScroll

Artikel Terkait