Membuat Fixed Floating Navigation

Membuat Fixed Floating Navigation Bar, banyak sahabat yang bertanya bagaimana cara membuat Navigasi menu / Nav Bar mempunyai posisi tetap di blopg WordPress saya? nah dengan inilah saya sedikit sharing tentang pembelajaran awal saya tentang Javascript 😛 .

Saya mencoba membuat sendiri Javascript ini dengan beberapa tutorial Javscript editing di beberapa situs , termasuk W3 dan tutsplus dan situs situis lainnya yang saya peroleh dari mesin pencari google.

Float navigation ini sebenarnya sama dengan cara membuat iklan melayang / float Ads di beberapa blog yang dulu sempat banyak dicari oleh para blogger yang digunakan oleh Facebook tentunya, akan tetapi di sini dengan menggunakan seiit code saja dan dibuat dengan sederhana, walaupun navigasi tidak berada di posisi atas sendiri di BLOG ( top of Blog ) seperti halnya di blog ini menggunakan script tersebut , langsung saja kita ke praktek :P.

Pastikan Blog anda telah terpasang atau mempunyai jquery.js  atau jquery latest ( terbaru lebih penting ) biula belum punya letakkanscript berikut di footer / header terserah , tapi saya sarankan di footer sebelum </body>.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Jquery.js adalah sebuah basic dari segala hal di Custom Javascript lainnya jadi jquery.js adalah sebuah basic yang dapat dikembangkan secara luas hingga dapat membuat berbagai animasi atau sepecial effect dan pengembangan lain sebagainya. serta diatas adalah versi 1.7.2 saya ambil dari google library api.

 

Stelah itu , tambahkan code beriut ini dibawah script pemanggil jquery tersebut:

/*smooth fixed scroll*/
 jQuery(function() { 
/* Stick the #navigasi to the top of the window */
     var nav = jQuery('#navigasi');
     var navHomeY = nav.offset().top;
     var isFixed = false;
     var jQueryw = jQuery(window);
 jQueryw.scroll(function() {
     var scrollTop = jQueryw.scrollTop();
     var shouldBeFixed = scrollTop > navHomeY; 
if (shouldBeFixed && !isFixed) { 
    nav.css({ 
        position: 'fixed',
        top: 0, 
});
        isFixed = true;
}
 else if (!shouldBeFixed && isFixed) { 
    nav.css({
        position: 'static'
    });
    isFixed = false;
}
    });
        });

 

Yup itu lah , tapi Wait..!!!! jangan keburu di save ,, ada yang harus diganti ,

Sahabat bisa lihat #navigasi , yang saya berikan warna merah? itu harus sahabat ganti dengan CSS code untuk DIV navigasi sahabat , sebagai contoh untuk twenty ten harus diganti dengan :
#access , kalau tidak tahu mana sih yang menjadi div nav barnya bisa ita lihat dengan bantuan firefox , inspect element. dan mencari mana yang menjadi parent navbar  menu.

 

parent nav screen shot

klik untuk memperbesar

nah yang diinspect dan mewakili dari semua navigasi bar itulah yang sahabat pasang css nya, alau diatas adalah bertuliskan , div#access, maka isikan saja / gantikan yang berwarna merah discript siatas ( #navigasi ) dengan #access , ( maaf gak tau istilahnya soalnya orang katrok 😛 ).

setelah itu save dan lihat .

Funsgi dari , script diatas adalah mereplace otomatis css style dari default nya menjadi : position:fixed dan top:0 , serta pada saat kita scroll ke atas ( top ) posisi awal website / blog maka CSS style dari navigasi tersebut menjadi : position:static

 

happy Blogging 😀 semoga informasi sederhana ini dapat berguna untuk sahabat 🙂