Cara membuat menu navbar pada blog mengikuti saat di scroll ke bawah

Membuat menu navbar supaya mengikuti scroll saat di turunkan kebawah merupakan salah satu design web/blog agar memudahkan pengunjung untuk melihat menu-menu yang terdapat pada suatu web/blog. Cara nya sangat mudah sekali untuk kamu lakukan. Pada dasarnya menu navigasi pada blog digunakan untuk mengetauhi menu yang terdapat atau yang disajikan di dalam sebuah situs. Langsung saja cara membuat menu di blog mengikuti saat di scroll atau di turunkan kebawah berikut ini :

1. Masuk akun blogger terlebih dahulu.

2. Klik template, pilih "edit html".

3. Lalu kamu cari [ ctrl + f ] kode berikut ]]></b:skin>

4. Lalu kamu taruh coding ini di atas code ]]></b:skin>

.sticky {
position:fixed; top:50px;/
* jarak dari atas*/
z-index: 100;
}

5. Lalu kamu taruh script di bawah ini, tepat di atas </body>  

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

6. Lalu kamu ganti .top-nav dengan id menu / nav kamu.

7. letakkan kode ini {width:100%;max-width:960px} di kode navigasi kamu contoh:

.top-nav {width:100%;max-width:960px}

.top-nav = Sesuaikan dengan ID "main navigation" dari template sobat

960 = Untuk menyesuaikan ukuran menu navigasi template sobat


x

artikel selanjutnya membahas tentang bagaimana sticky nav tidak scroll otomatis di mode mobile 

Baca Juga