Cara Membuat Menu Blog atau Website Berada di Atas Setelah di Scroll

Cara Membuat Menu Blog atau Website Berada di Atas Setelah di Scroll

Membuat menu berada di atas atau sering di bilang posisinya menjadi fixed setelah di scroll. Cara ini saya buat karena menurut saya blog atau website yang memiliki fitur seperti ini memiliki kesan tersendiri, selain itu cara ini bisa mempermudah pengunjung untuk berpindah ke menu yang lain. Untuk lebih jelasnya bagaimana tampilannya atau apa yang di maksud dengan Membuat Menu Blog atau Website Berada di Atas Setelah di Scroll, maka blog ini lah contohnya. Perhatikan menu yang ada di blog ini, ketika scroll kita masih di atas maka posisi menu berada di bawah header tetapi setelah di scroll kebawah maka menu menjadi tetap diatas.

Untuk membuatnya langsung saja ikuti langkah-langkahnya:

1. Buka Menu Template, pastinya.

2. Cari kode </head>

3. Pastekan Kode berikut di atas kode </head> tersebut

<script type='text/javascript'> //<![CDATA[ jQuery(document).ready(function(){ var jQwadah = jQuery("#menuwrapper"); var jQluhur = jQwadah.offset().top; var jQatur = jQuery(document); jQuery(window).scroll(function() { cicing = jQatur.scrollTop() - jQluhur; if(cicing < 0) jQwadah.offset({top: jQluhur}); else jQwadah.offset({top: jQatur.scrollTop()}); }); }); //]]> </script>

Untuk Id nya (#menuwrapper) itu disesuaikan dengan id dari konten anda yang akan dibuat menjadi fixed setelah di scroll.

4. Simpan Template anda.

Catatan:

Jika tidak terjadi perubahan apa-apa pada template anda, itu dikarenakan ada satu hal penting yang berlum ada di template anda yaitu JQuery

Untuk menambahkannya ke template anda, maka Pastekan kode berikut di atas </head>

<script src='http://code.jquery.com/jquery-1.6.4.js' type='text/javascript'/>