Cara Membuat Menu Melayang Saat Di Scroll

Cara Membuat Menu Melayang Saat Di Scroll

You might be interested in
Cara Membuat Menu Melayang Saat Di Scroll.  Setelah lama tidak pernah membuat postingan di blog ini, karena kesibukan diluar serta banyak sekali blog milik saya sehingga lupa kalo punya blog yang namanya antoncabon heheheh.  Nah tadi sewaktu browsing saya menemukan artikel tentang cara membuat sticky menu, menurut saya cukup menarik dan membuat tampilan blog jadi keren dan selain itu sesuai dengan fungsi menu, yaitu untuk membantu bernavigasi di blog atau website milik kita, dengan adanya trik ini maka semakin mudah kita menemukan letak menu navigasi, karena posisinya yang dibuat melayang di atas, sehingga ketika mouse di scroll, menu tersebut tidak ikut naik ataupun turun.
Jika anda tertarik untuk membuatnya di blog anda silahkan ikuti langkah-langkah nya berikut ini.

Cara Membuat Sticky Menu


Sticky Menu
Sticky Menu


1. Masuk ke Dashboard Blogger > Template > Edit HTML
2. Kemudian cari kode </body> dengan menekan CTRL+F. Masukan kode berikut, letakan tepat di       atas </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    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': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script> 


Contoh Menu Navigasi
Contoh Menu Navigasi 

Pada elemen yang akan dibuat sticky dalam hal ini '.nav', bisa anda ganti dengan elemen ang lainnya tergantung selera. Sebagai contoh jika #Sidebar yang ingin dibuat sticky maka isikan '#Sidebar' dan seterusnya.

DEMO LIVE | DOWNLOAD

Selamat berkreasi, dan semoga berhasil.

Source: http://balongtutorial.blogspot.com
Previous Post
Next Post

post written by:

Loading...

4 komentar:

  1. Maaf,, Mau Ngasi tau,,, ane udah lihat script ini di 5 blog lain,, bahkan komentar di script nya pun sama...

    Ntah situ yang copas atau situ yang korban copas...

    BalasHapus
  2. bener mas dan itu ada sumber scriptnya serta berantai... terakhir berujung di blog kang ismet emang ada masalah???

    BalasHapus
  3. satu lagi saya kasih tahu, untuk membuat script diatas tidak semua orang bisa membuatnya, kata2 copas yang anda maksud itu scriptnya kan? coba kamu cek semua blog di jagat internet ini, rata2 script yang dipake untuk bahan posting mau itu sticky menu, related post, recent comment semua hampir sama semua artinya anda bisa berasumsikan... makasih sudah berkomentar

    BalasHapus