Cara Membuat Menu Navigasi Tidak Bergerak Tetap Muncul Setelah Discroll (Sticky Menu)

Membuat sticky menu -

Pada postingan terdahulu saya jelaskan tentang  Cara Membuat Like Box Facebook Melayang (Popup)

Dengan Lightbox Effect, saat ini saya akan berbagi bagaimana Cara Membuat Menu Menempel Pada Layar Setelah Discroll (ditarik ke bawah) atau disebut dengan Sticky Menu.

Dengan membuat sticky menu, tentunya akan memudahkan pengunjung "berselancar" dan mengeksplor blog sobat tanpa harus naik turun scroll. Dan ini tentunya akan membuat semua unsur dimenu blog sobat tidak akan terlewatkan oleh pengunjung. Sticky Menu ini awalnya akan terlihat normal, tetapi akan melayang (fixed) ketika mouse discroll ke bawah.

Awalnya saya tertarik dan minat sekali dengan menu navigasinya website CB Blogger untuk diaplikasikan di blog saya karena saat kita scroll, menunya tetap muncul di atas. Setelah coba dicari di kotak "search" blognya, ternyata CB Blogger berbagi tips cara membuatnya: Menu Navigasi Blog Tetap Muncul Saat Halaman Discroll.

Saya ambil kodenya dan kopipastekan di blog saya jadi dah..., bisa langsung dilihat penampilannya disini. Cara membuatnya mudah sekali bisa sobat coba langkah berikut.

 

Cara Membuat Menu Menempel Pada Layar Setelah Discroll

1. Masuk akun blogger > Template > Edit HTML

2. Cari (CTRL+F) kode </body>

3. Copy kode berikut ini dan Paste di atas kode </body>

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    var stickyNavTop = $('.nav').offset().top;
    var stickyNav = function(){
        var scrollTop = $(window).scrollTop();
        if (scrollTop > stickyNavTop) {
            $('.nav').css({ 'position': 'fixed', 'top':0, 'z-index':9999 });
        } else {
            $('.nav').css({ 'position': 'relative' });
        }
    };
    stickyNav();
    $(window).scroll(function() {
        stickyNav();
    });
});
//]]>
</script>

4. PERLU DIPERHATIKAN! Sebelum sobat klik "Save", Ganti elemen .nav dengan elemen/kode yang menjadi Navigasi Menu blog sobat. Di blog CB (New Johny Wuss), kodenya bernama #menu, sehingga kodenya menjadi:

<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>

Demikianlah cara membuat menu melayang setelah discroll atau sticky menu. Semoga bermanfaaat, dan selamat mencoba !!

HARAP UNTUK TIDAK MELAKUKAN COPY PASTE !

Judul: Cara Membuat Menu Navigasi Tidak Bergerak Tetap Muncul Setelah Discroll (Sticky Menu)
Rating Blog: 4.5 dari 5
Ditulis oleh Alami 69
Anda sedang membaca artikel Cara Membuat Menu Navigasi Tidak Bergerak Tetap Muncul Setelah Discroll (Sticky Menu). Jika ingin mengutip, harap memberikan link aktif dofollow ke URL https://obatalami69.blogspot.com/2016/09/cara-membuat-menu-navigasi-tidak.html. Artikel ini dilindungi oleh DMCA Protected. Terima kasih sudah singgah di blog ini, jangan lupa di Share jika anda suka.