Cara Membuat Navigasi Header Melayang dan Mengecil Saat di Scroll

Cara Membuat Navigasi Header Melayang Mengecil - Saya akan memberikan tutorial bagaimana cara membuat navigasi yang berada di area header bisa melayang saat di scroll, kemudian ukurannya akan mengecil, sehingga tidak terlalu menggangu pembaca saat melihat tempilan blog. Contohnya sama seperti pada blog ini.

Untuk membuat efek seperti diatas, ada beberapa hal yang harus teman-teman perhatikan.

1. Navigasi harus berada di area Header, Sehingga jika kita memberikan efek melayang pada header maka otomaris navigasi ikut melayang.
   Bagian yang ada pada samping header tidak harus navigasi, sesuai keinginan saja.
2. Kita akan menggunakan Java Script

Cara Membuat Navigasi Header Melayang Mengecil

1. Simpan Javascript dibawah ini pada template Blogger > Template > Edit Html letakan sebelum </body>

JS <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    var stickyNavTop = $('#header').offset().top; 
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();  
        // Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya        
        if (scrollTop > stickyNavTop) { 
            $('#header').addClass('sticky');
        } else {
            $('#header').removeClass('sticky');
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

Tentukan CSS Header yang akan dibuat melayang.

Untuk mengetahui nama class css bagian header teman-teman bisa menggunakan Tool Inspect(CTRL+Shift+i) pada browser Chrome.

Pada contoh diatas, CSS Header blog ini menggunakan #header sehingga bagian inilah yang nantikan akan dibuat melayang.

Jika berbeda, teman-teman bisa merubah #header yang ada di Javascript diatas menjadi css header milik kamu yg sesuai dengan template, kemudian simpan.

2. Membuat ukuran header lebih pendek saat di scroll
Setelah dibuat melayang, tentu kita akan membuat ukuran header tersebut lebih pendek, ini berfungsi agar tidak menggangu pembaca blog.

Caranya yaitu dengan menambahkan CSS baru lagi, CSS inilah yang akan aktif saat pengguna melakukan scoll. contoh CSS yang saya gunakan pada blog ini.

CSS.sticky {
    position: fixed;
    top: -15px;
    z-index: 9999;
    width: 890px;
    height: 30px;
    background: rgb(255, 255, 255);
}

Teman-teman bisa menambahkan CSS diatas pada Blogger > Template > Edit Html sebelum ]]></b:skin> dan sesuaikan css diatas agar pas dengan template milik kamu, Jika sudah silakan Save Template

Lihat hasilnya.. kalo masih belum berhasil mungkin karena kurang teliti atau tutorial saya ini yang masih berbelit-belit.. hehehe. mohon dimaafkan ya..

Semoga tutorial Cara Membuat Navigasi Header Melayang Mengecil bisa bermanfaat dan berhasil diterapkan.