Cara Membuat Menu Tetap Mengikuti Saat Di Scroll
Fungsi fixed menu ini adalah untuk mempermudah pencarian menu bagi pengunjung yang berkunjung di blog kalian agar tidak susah scroll ke atas lagi melihat list menu blog dan tampilan blog semakin elegan saat di lihat. bagaimana apakah kalian tertarik?
Cara Membuat Menu Navigation Mengikuti Scroll
1. Login ke akun blogger kalian
2. Masuk ke menu blogger Tema>Edit Html
3. Cari Kode script ini dengan cara CTRL+F </style> atau ]]></b:skin>
Copy Dan Paste Letakan Kode </style> atau ]]></b:skin> (Diatasnya)
.sticky {
position:fixed; top:50px;/
* jarak dari atas*/
z-index: 100;
}
position:fixed; top:50px;/
* jarak dari atas*/
z-index: 100;
}
Letak Kan Script Dibawah ini Di atas kode html </body>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.Nav-Menu').offset().top;
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.Nav-Menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.Nav-Menu').css({ 'position': 'relative' });
} };
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
//<![CDATA[
$(document).ready(function() {
var stickyNavTop = $('.Nav-Menu').offset().top;
var stickyNav = function(){
var scrollTop = $(window).scrollTop();
if (scrollTop > stickyNavTop) {
$('.Nav-Menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
} else {
$('.Nav-Menu').css({ 'position': 'relative' });
} };
stickyNav();
$(window).scroll(function() {
stickyNav();
});
});
//]]>
</script>
Keterangan
- Nav-Menu: Ganti dengan id menu/nav kamu dengan cara (CTRL+F) cari nama Nav atau Navigation Menu dan ganti copy dan paste di kode html.
Posting Komentar untuk "Cara Membuat Menu Tetap Mengikuti Saat Di Scroll"