Menu Navigasi Melayang (Fixed) Pada Saat di Scroll

Share:
  • Login Blog
  • Masuk Kebagian Template kemudian Edit Template
  • Setelah itu copy dan paste kode dibawah ini tepat diatas kode </body>

 <script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky yaitu .nav
    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' });
        }
    };
    // Jalankan fungsi
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script> 
  • Kemudian Ganti Element .nav dengan element yang ingin dibuat mengikuti scroll
  • Kemudian simpan Template dan lihat hasilnya

Post a Comment

No comments

# Terima Kasih Telah Berkunjung Semoga Artikel Yang Kamu Baca Bermanfaat :)