Membuat menu melayang setelah discroll menggunakan jQuery. Menu diam atau melengket setelah laman digulung.
Banyak situs menerapkan menu sticky, termasuk 'Header' situs yang sedang Anda baca ini. Saya sendiri tidak menemukan padanan kata sticky ini dalam bahasa Indonesia. Saya menyamakan sticky ini dengan melengket atau melekat. Menu melengket diterapkan agar memudahkan pengunjung mengeksplor situs tanpa harus bolak-balik menggulung (scroll) laman. Menu akan tetap lengket meskipun laman digulung jauh ke bawah.
Bagaimana membuatnya? Salin jQuery berikut dan letakkan di atas tag
Sesuaikan nama elemen yang akan dibuat sticky. Dalam contoh ini elemen yang saya sticky adalah 'menu'.
Bagaimana jika saya ingin menu itu muncul hanya setelah discroll? Jika tidak discroll menu tersebut tersembunyi.
Selamat belajar :)
Bagaimana membuatnya? Salin jQuery berikut dan letakkan di atas tag
</body>
.Sesuaikan nama elemen yang akan dibuat sticky. Dalam contoh ini elemen yang saya sticky adalah 'menu'.
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .menu
var stickyNavTop = $('.menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.menu').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Bagaimana jika saya ingin menu itu muncul hanya setelah discroll? Jika tidak discroll menu tersebut tersembunyi.
Memunculkan/menampilkan Menu setelah discroll
Gunakan jQuery berikut untuk memunculkan/menampilkan menu hanya setelah halaman discroll.<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .menu
var stickyNavTop = $('.menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('.menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.menu').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Selamat belajar :)
Gan kalau di blog ane cara makenya gimana? classnya kan beda?
ReplyDeleteSesuaikan aja class-nya.
DeleteKalau diterapkan di sidebar gimana?
ReplyDeleteGanti class-nya.
DeleteThanks :)
Deletecara mengetahui nama menu itu gimana gan
ReplyDeleteKlik kanan > Inspect Elemen
Deletekalo pengen 2 elemen yang melayang gmn ?
ReplyDeleteMakasih sob untuk informasinya, sangat membantu :)
ReplyDeletehttp://goo.gl/0oMP9t