Tutorial tentang Cara Membuat Menu Navigation Melayang Setelah Discroll (Sticky Menu) ini saya buat karena saya telah menemukan pertanyaa...
Tutorial tentang Cara Membuat Menu Navigation Melayang Setelah Discroll (Sticky Menu) ini saya buat karena saya telah menemukan pertanyaan sobat blogger pada suatu group dalam Facebook dan sekarang ini saya berencana akan membuatnya.
Menu Melayang setelah discroll atau sering disebut juga Sticky Menu ini berguna untuk tetap menampilkan menu yang ada pada blog kita walaupun blog kita scroll ke bawah. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.Cara Membuat Menu Navigation Melayang Setelah Discroll :
- Simpan kode berikut ini tepat di atas
</body>
- Silahkan ganti
.nav
dengan elemen yang ada pada Menu Navigasi pada blog sobat
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky
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' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Sumber : http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html