Membuat Header Melayang

Header Melayang mungkin anda pernah melihatnya di beberapa blog ataupun website terntentu. Apa gunanya ? Ya itu untuk mempermudah pengunjung menjelajahi blog ataupun website anda dan tentunya bagus untuk tampilan. Ide saya membuat ini muncul dari template premium Mbak arlina yang bernama Invert Pro keren templatenya dan tentunya buat saya pengen ngerombaknya tapi ya apa daya saya tidak punya uang untuk membelinya jadi saya nyari trik agar sama sedikit lah.

Untuk penampilan templatenya bisa kunjungi disini http://arlinatheme.blogspot.com/

Langsung saja kembali ke cara membuat header melayang


Taruh JavaScript di bawah ini tepat di atas </body>

 <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, 'width':'100%', });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script> 

Penting :
JavaScript di atas di aplikasikan pada .nav di template blogger anda, jadi tinggal ganti saja dengan class header anda contohnya seperti ini

Untuk Demo bisa dilihat d blog ini, kalau masih terdapat error silahkan berkomentar.