Sebenarnya cara ini sudah lama saya gunakan sampai saya sendiri lupa website yang membuat trik ini yang pasti websitenya bukan dari blogger Indonesia ,jadi mohon maaf jika saya tidak meletakkan link sumber Script yang saya gunakan .Beberapa waktu lalu ada seorang sahabat blogger menanyakan tentang cara membuat menu Navigasi yang apa bila di scroll menjadi fixed untuk contohnya silahkan lihat screenshot gambar di bawah ini atau coba scrool ke atas pada bagian homepage atau post page maka menu navigasi horisontal yang saya gunakan pada ketinggian 0px maka menu akan menjadi Fixed/tetap berikut gambar nya:
Untuk cara membuat
Navigasi Menu With Animasi Scroll yang saya contohkan di atas sobat harus mengenali dulu Navigasi menu yang sobat pakei ,misal kita menggunakan Navigasi menu horisontal yang ada pada template johny wuss contoh menunya seperti di bawah ini :
<div id='toppic'>
<div id='topwrapper'>
<ul id='top'>
bla bla bla --------
</ul>
</li>
<li><a href='#'>Menu 2</a></li>
</ul>
<br class='clearit'/>
</div>
</div>
Coba perhatikan kode berwarna merah di atas ,karena kode pemanggilan nya berbentuk ID maka secara otomatis kode css nya pasti menggunakan tanda
# di depan kode , maka kode jquery yang hrus sobat gunakan harus seperti contoh di bawah ini dan letakkan tepat di atas kode
</body> :
<script type='text/javascript'>
//<![CDATA[
var num = 50; //number of pixels before modifying styles
$(window).bind('scroll', function () {
if ($(window).scrollTop() > num) {
$('#toppic').addClass('fixed');
} else {
$('#toppic').removeClass('fixed');
}
});
//]]>
</script>
Dan yang terakhir letakkan kode Css berikut ini tepat di atas kode ]]></b:skin> berikut kodenya :
.fixed{position:fixed;top:0;z-index:9999}
Jika sobat ada kesulitan tentang cara membuat Navigasi Menu With Animasi Scroll silahkan ajukan pertanyaan pada form komentar atau add saya di facebook