Cara Membuat Sticky Menu Melayang di blog
10 March 2014
Cara Membuat Menu Melayang (Sticky Menu) di Blog - Sebelumnya saya sudah memberi tutorial Cara Membuat Sticky Widget di Sidebar blog dan sekarang saya akan memberikan tutorial yang juga dinamakan (Sticky) atau mengikuti, yang bernama Sticky Menu
Dengan membuat sticky menu, tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.
Simpan kode ini di atas </body> dan tentukan selectornya (pada script dibawah saya aplikasikan pada #header-wrapper).
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu #header-wrapper
var stickyNavTop = $('#header-wrapper').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#header-wrapper').css({ 'position': 'relative' });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Demo
Memunculkan Menu Setelah di Scroll
Apabila ingin memunculkan menu hanya setelah discroll, gunakan kode ini :
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu #header-wrapper
var stickyNavTop = $('#header-wrapper').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
// Kondisi jika discroll maka menu akan selalu diatas, dan sebaliknya
if (scrollTop > stickyNavTop) {
$('#header-wrapper').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('#header-wrapper').css({ 'position': 'absolute', 'top':-9999, 'left':-9999 });
}
};
// Jalankan fungsi
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Itulah Tutorial ''Cara Membuat Sticky Menu Melayang di Blog'' jangan lupa follow dan pasang banner/link Exchange disini ------- ( Glade Lands ) -------
Source : http://blog.kangismet.net/2013/11/membuat-menu-melayang-setelah-discroll.html