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

Cara Membuat Menu Blog atau Website Berada di Atas Setelah di Scroll Efect Sticky bar. Membuat menu berada di atas atau sering di bilang pos... thumbnail 1 summary

04.29

Cara Membuat Menu Blog atau Website Berada di Atas Setelah di Scroll Efect Sticky bar.
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>

Dan Letakan Juga Code Ini Tepat Diatas Code Diatas

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

Sebagai Coding Untuk Memvalid kan Efect Sticky bar nya.

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

4. Simpan Template anda.

Contoh Nya Pada Menu BLog Saya Sendiri Ini.

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>