.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>.
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.
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
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.
klik untuk memperbesar
).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
Sumber : https://www.inforiatif.com/membuat-fixed-floating-navigation
EmoticonEmoticon