Membuat Menu Melayang Saat Discrool
Pada kesempatan ini saya akan membagikan tips bagaimana membuat menu melayang saat discrool atau saat anda membaca artikel lain terus kebawah maka menu anda akan tetap mengikuti, hal ini mempermudah para pengunjung blog anda untuk memilih artikel yang anda buat.
Menu yang saya maksut seperti gambar dibawah ini
Menu yang saya maksut seperti gambar dibawah ini
Langsung saja kita masuk ke pembahasan cara membuat menu melayang saat discrool
1. Silahkan masuk ke blog anda.
2. Pilih laman Template => edite HTML
3. Cari </body> dan letakkan kode bibawah ini tepat diatasnya
<script type='text/javascript'>
//<![CDATA[ $(document).ready(function() { var stickyNavTop = $('#menu').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('#menu').css({ 'position': 'relative' }); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]>
</script>
//<![CDATA[ $(document).ready(function() { var stickyNavTop = $('#menu').offset().top; var stickyNav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickyNavTop) { $('#menu').css({ 'position': 'fixed', 'top':0, 'z-index':9999 }); } else { $('#menu').css({ 'position': 'relative' }); } }; stickyNav(); $(window).scroll(function() { stickyNav(); }); }); //]]>
</script>
Keterangan : Sesuaikan yang berwarna biru dengan blog anda.
4. Simpan dan lihat hasilnya
5. Selesai.
Sekian dan salam jabat tangan.