Membuat Navigasi Menu Statis Tetap Muncul Saat Blog Discroll ke Bawah
KODE Javascript agar Navigasi Menu di bawah header blog tetap muncul saat halaman di-scroll ke bawah --Static Menu, Sticky Menu, atau Navigasi Menu Melayang (Floating).
KODE JAVASCRIPT STATIC NAV MENY (FLOATING)
<script type=text/javascript>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $(#menu).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$(#menu).css({ position: fixed, top:0, z-index:9999 });
} else {
$(#menu).css({ position: relative });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $(#menu).offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$(#menu).css({ position: fixed, top:0, z-index:9999 });
} else {
$(#menu).css({ position: relative });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Yang warna merah (#menu) adalah nama Navigasi Menu di bawah header. Sesuaikan dengan nama elemen menu blog Anda, mungkin "nav", "nav menu", "main menu", atau lainnya. Tiap template berbeda.
Cara Pasang:
1. Template > Edit HTML
2. Copas kode tersebut di atas kode </body>
3. Pastikan template Anda ada kode JQuery seperti ini:
<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js type=text/javascript/>
Jika belum ada, pasang di atas kode </head>, agar kode navigasi statis (melayang) bisa berfungsi.*
alternative link download