Membuat Menu Melayang Setelah Discroll (Sticky Menu)

Kamis, 01 Mei 2014

Laba-Laba Blog - Ada beberapa website yang memakai sticky menu, memasang sticky menu sangat memudahkan pengunjung blog untuk menjelajahi blog secara mendalam. Memasang sticky menu sangat mudah serta efisien. Pada saat ini sticky menu sangat populer di dunia blogger. Apakah anda semakin tertarik untuk memasang sticky menu? Berikut, ikutilah langkah-langkah di bawah ini.

1. Simpan kode ini 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 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

2. Apabila ingin memunculkan menu hanya setelah discroll, simpan kode di bawah ini:

<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 });
} else {
$('.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

3. Simpan.

Terinspirasi oleh : Kang Ismet