Membuat Navigasi Menu Blog Tetap Muncul Saat Halaman Discroll ke Bawah

Baca Juga

CARA Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah (Sticky Navigation Bar) sudah pernah CB share di posting sebelumnya: Menjadikan Menu Navigasi Tetap Muncul.

Untuk melengkapi atau sebagai alternatif, CB share kembali kode yang membuat menu blog Anda melayang, floating, sticky, atau tetap muncul saat halaman discroll ke bawah.

Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah ini menjadi trend desain blogger masa kini dan masa depan. 

Sticky Menu ini ramah mengguna, user friendly, karena memudahkan pengguna untuk membuka link ke konten blog yang lain setelah selesai membaca sebuah postingan, tapi harus scroll lagi ke atas, meski sudah ada tombol Back to Top.

Catatan: kode-kode berikut ini bukan membuat navigasi menu baru, tapi hanya mengubah navigasi menu yang sudah ada menjadi tetap muncul.

Cara Membuat Menu Melayang Saat Discroll

Berikut ini cara lebih mudah untuk membuat menu melayang saat discroll.

1. Tema > Edit HTML
2. Copas kode jquery berikut ini di atas kode </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js' type='text/javascript'/>

Jika di dalam template Anda sudah terdapat kode jquery seperti di atas, langsung saa ke langkah ketiga.

3. Copas kode berikut ini tepat di atas kode </body>

    <script type='text/javascript'>
      $(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>

4. Ganti #menu dengan nama navigasi menu blog Anda, mungkin #menu-nav, .navmenu, atau nama lainnya. Cek kode CSS navigasi menu Anda.

5. Save Template!

Cara Lain Membuat Menu Tetap Muncul Saat Scroll ke Bawah

1. Tema > Edit HTML 

2. Simpan kode berikut ini di atas kode ]]></b:skin>

Atau bisa juga dengan cara: Tema > Customise > Advanced > Add CSS > Copas kode berikut ini:

sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}

Alternatif:

Simpan kode berikut ini di atas kode </head>

<style>
sticknav {background: #ffffff;height: 30px;width: 100%;margin-right: 0px;margin-left: 0px;left: 0px;
right: 0px;position: relative;z-index: 9999;}
.fixed { position:fixed;}
</style>

3. "Bungkus" kode navigasi menu blogger Anda dengan kode seperti di bawah ini:

<sticknav>
<!--Kode HTML Navigasi Menu Anda di Sini-->
</sticknav>

Kode navigasi menu biasanya diawali dengan kode <nav id=' dst hingga </nav> atau <div id=' dst.. hingga </div>

4. Simpan kode berikut ini di atas kode </body>

</script>
<script type="text/javascript">
$(document).ready(function() {
    var aboveHeight = $('header').outerHeight();
$(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('sticknav').addClass('fixed').css('top','0').next().css('padding-top','60px');
        } else {
       $('sticknav').removeClass('fixed').next().css('padding-top','0');
        }
    });
});
</script>

Pastikan di template Anda sudah ada link ke kode jQuery.

5. Save Template!

Demikian Cara Membuat Navigasi Menu Tetap Muncul Saat Halaman Discroll ke Bawah. Good Luck & Happy Blogging! (www.contohblog.com).*