Cara Membuat Sub Menu berjalan Saat Di Scroll
February 10, 2017
4 Comments
Hai masih bersama saya Fathi Muhammad, kali ini ane mau post soal Sub Menu yang berrjalan saat di Sroll seprtigambar di bawah ini :
nah , Untuk cara membuat menu melayang diatas header ternyata sangatlah mudah , kamu hanya menambahkan kode script dibawah ini diatas script </body> atau dibawah <body> .
Dengan membuat menu melayang setelah discroll (sticky menu) atau membuat menu melayang di web tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll.
untuk #menu sesuai dengan css masing masing ya cara nya di inspect Element.
oke mungkon ini saja yang dapat saya sampaikan kurang lebih nya mohon maaf terma kasih.
 |
| Gambar 1.0 |
nah , Untuk cara membuat menu melayang diatas header ternyata sangatlah mudah , kamu hanya menambahkan kode script dibawah ini diatas script </body> atau dibawah <body> .
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
// Menentukan elemen yang dijadikan sticky yaitu .nav
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>Dengan membuat menu melayang setelah discroll (sticky menu) atau membuat menu melayang di web tentunya akan memudahkan pengunjung mengeksplor blog sobat tanpa harus naik turun scroll.
untuk #menu sesuai dengan css masing masing ya cara nya di inspect Element.
oke mungkon ini saja yang dapat saya sampaikan kurang lebih nya mohon maaf terma kasih.
Alhamdulillah di blog saya udah diterapkan jadinya akan mengikuti kursor menu subnya. Makasih mas sangat membantu.
ReplyDeleteiya sama sama
ReplyDeleteIjin copy gan buat pasang d blog ane
ReplyDeletesilahkan
ReplyDelete