Cara Membuat Menu Melayang Saat Di Scroll. Setelah lama tidak pernah membuat postingan di blog ini, karena kesibukan diluar serta banyak sekali blog milik saya sehingga lupa kalo punya blog yang namanya antoncabon heheheh. Nah tadi sewaktu browsing saya menemukan artikel tentang cara membuat sticky menu, menurut saya cukup menarik dan membuat tampilan blog jadi keren dan selain itu sesuai dengan fungsi menu, yaitu untuk membantu bernavigasi di blog atau website milik kita, dengan adanya trik ini maka semakin mudah kita menemukan letak menu navigasi, karena posisinya yang dibuat melayang di atas, sehingga ketika mouse di scroll, menu tersebut tidak ikut naik ataupun turun.
Jika anda tertarik untuk membuatnya di blog anda silahkan ikuti langkah-langkah nya berikut ini.
Jika anda tertarik untuk membuatnya di blog anda silahkan ikuti langkah-langkah nya berikut ini.
Cara Membuat Sticky Menu
 |
| Sticky Menu |
1. Masuk ke Dashboard Blogger > Template > Edit HTML
2. Kemudian cari kode </body> dengan menekan CTRL+F. Masukan kode berikut, letakan tepat di atas </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
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' });
}
};
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>  |
| Contoh Menu Navigasi |
Pada elemen yang akan dibuat sticky dalam hal ini '.nav', bisa anda ganti dengan elemen ang lainnya tergantung selera. Sebagai contoh jika #Sidebar yang ingin dibuat sticky maka isikan '#Sidebar' dan seterusnya.