Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY )

Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY )

Trik dan tips kali ini akan mengulas tentang bagaimana Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY ). Karena akhir-akhir ini saya jarang menulis postingan dikarenakan saya sibuk edit template menu sticky ini.

Dan setelah saya menemukan cara membuat menu navigasi melayang dan berhasil saya terapkan pada template blog saya, saya pun puya keinginan untuk berbagi buat teman-teman blogger yang membutuhkan.

Jika anda pada saat ini sedang mencari cara membuat menu tetap dan Posisi Fixed setelah di scroll kebawah. maka anda berada di artikel yang tepat. Karena saya juga akan menjelaskan dengan jelas sesuai yang saya terapkan pada blog saya Trik Dan Tips Untukmu ini.

Sebenarnya caranya sangat simple sekali, hanya dengan menaruh kode JS kedalam template langsung jadi. Akan tetapi sebagian hasilnya tidak sesuai dengan keinginan kita. Sebenarnya juga banyak sekali template yang sudah menyediakan fitur Menu Sticky, akan tetapi buat kalian yang sudah nyaman dengan template yang sudah terpasang dan ingin mengubahnya sendiri Membuat Menu Sticky tentu juga lebih kreatif  bukan..?

Baca juga Trik Agar Menang Domino Qiu Qiu Online Dengan Membaca Kartu Lawan
Baca juga Membuuat Artikel Blog Seo Dan Muncul Di Google Terbaru

Baiklah saya rasa tidak perlu panjang lebar Postingan tentang Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll, kita langsung ke pada intinya saja.


Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY )

>> Langkah pertama silahkan login dulu ke akun blogger.

>> Selanjutnya Menuju ke Template dan Edit HTML

>> Silahkan Copy dulu kode di bawah ini.

<script type='text/javascript'>
//<![CDATA[
$(document).ready(function() {
    // Menentukan elemen yang dijadikan sticky
    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>

>> Setelah anda copy kode di atas kemudian cari code </body> untuk lebih mudahnya Gunakan Ctrl+f .

>> Paste kan code di Atas tepat di atas code </body>  

>> Selenjutnya klik save template dan selesai.

Keterangan:
Pada code di atas ada code yang berwarna kuning yaitu kode .nav   tersebut silahkan ganti dengan Nama ID navigasi template anda. Misalnya pada template anda ID-nya <div id='menu-nav'> .  Maka tag .nav  yang berwarna kuni diatas silahkan diganti dengan .menu-nav .


Setelah anda terapkan cara di atas sekarang lihatlah hasilnya, caranya cukup mudah kan. 
Saya rasa cukup sampai disini saja postingan saya mengenai seputar Cara Membuat Menu Navigasi Tetap Terlihat Setelah Di Scroll ( MENU STICKY ) . Jika ada yang belum jelas silahkan bertanaya. insyaalloh saya jawab. 

Post a Comment

rada bingung tetapi dah lega bisa nemu tutorialnya. makasih kakak

Bisa menjadi sarana belajar tentang setting blog, terima kasih

Sama-sama senoga bermanfaat..

sama-sama .. semoga bermanfaat

Tinggalkan Komentar Kamu Tentang Postingan Ini

[blogger]

MKRdezign

Contact Form

Name

Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget