Membuat Menu Melayang atau Sticky Navigation

Posted on
Membuat Menu Melayang atau Sticky Navigation

Membuat Menu Melayang (Sticky Navigation) Pada Blog – Dengan membuat Sticky Navigation Menu ini, maka tentu akan sangat membantu dan memungkinkan pengunjung untuk mengeksplorasi blog Anda tanpa harus ribet-ribet scroll naik turun dengan mousenya, karena menu navigasi pada blog anda akan terus lengket menempel dilayar meski di scroll kebawah sejauh apapun. Untuk menerapkannya silakan ikuti tutorial di bawah ini.

Cara 1. Sticky Navigation awalnya akan terlihat normal, tetapi akan melayang ketika di scroll ke bawah.
 
Caranya: Simpan kode ini sebelum atau di atas </ body> dan tentukan elemen kode css menu navigasi pada blog anda (misalnya dalam script di bawah ini elemen menu navigasi saya diwakili dengan kode css .nav) 

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Determine which element that to be created sticky, is .nav
var stickyNavTop = $('
.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Conditions when scrolling the navigation menu will always be on above, and vice versa
if (scrollTop > stickyNavTop) {
$('
.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.nav').css({ 'position': 'relative' });
}
};
//
Execute function
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

<>

                                                                  atau

Cara 2. Memunculkan menu hanya jika mouse di scroll
 

Jika Anda ingin menampilkan menu hanya setelah di scroll, maka gunakan kode ini:

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Determine which element that to be created sticky, is .nav
var stickyNavTop = $('
.nav').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Conditions when scrolling the navigation menu will always be on above, and vice versa
if (scrollTop > stickyNavTop) {
$('
.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('
.nav').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
}
};
// Execute function
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>

Oke Demikian artikel Membuat Menu Melayang atau Sticky Navigation ini. Silahkan kirim komentar jika ada pertanyaan.

One thought on “Membuat Menu Melayang atau Sticky Navigation

Leave a Reply

Your email address will not be published. Required fields are marked *