Mengapa ada permintaan seperti itu? Pernahkah Anda menemukan beberapa situs web di luar negeri yang ketika Anda menggulir ke atas, bilah navigasi mengapung di posisi teratas. Jika pengguna ingin melihat konten, mereka dapat mengklik untuk mencapainya secara langsung, yang menghemat banyak waktu menyeret. Tentu saja, lebih mudah untuk kembali ke atas. Tetapi terkadang tombol kembali ke atas sering diabaikan. Mari kita lihat kode dan demonstrasi ( memperkenalkan JQuery 1.9 ).
Untuk menentukan apakah mouse menggulir atau menggulir ke bawah, Anda dapat membandingkan koordinat gulungan terakhir pengguna dengan koordinat di waktu berikutnya. Ketika terakhir kali kurang dari waktu berikutnya, yaitu, pengguna menggulir ke bawah, jika tidak, itu berarti bahwa pengguna menggulir ke atas. Nilai koordinat gulir dapat digunakan sebagai scrolltop jendela.
Contoh Kode HTML
<Div id = "JNAV"> <ul> <li> <a href = "http://caiibajian.com/"> pengembangan front-end </a> </li> <li> <a href = "#"> blog pengembangan front-end </a> </li> <li> <a href = "#"> front-end-end </a> </li> <li> <a href = "#"> Front-end href = "#"> pengembangan front-end </a> </li> <li> <a href = "#"> Pengembangan front-end </a> </li> </ul> </div>
Contoh Kode JavaScript
var $ nav = $ ('#jnav'), navtop = $ nav.Offset (). Top, navh = $ nav.outerheight (), wintop_1 = 0, winwidth = $ (window) .width (), holder = jquery ('<verv>'); $ (window) .on ('scroll', funch ', funcroLer). holder.css (tinggi ', navh); untuk menggulir dan menampilkan jika (wintop_2> wintop_1 && winwidth> 980) {$ nav.removeclass ('fixed-nav-appear')} lain jika (wintop_2 <wintop);Contoh Kode CSS
.nav {lebar: 980px; margin: 0 auto;}. nav li {display: inline-block; *Tampilan: inline; *Zoom: 1; margin: 0 10px;}. nav li a {display: block; padding: 5px 10px;}. Fixed-nav {position: fixed; Lebar: 100%; Atas: -40px; -webkit-transisi: Top .5s; -Moz-transisi: Top .5s; --transisi: Top .5s; Transisi: Top .5s; -webkit-box-shadow: 0 2px 2px rgba (0,0,0, .1); -Moz-box-shadow: 0 2px 2px RGBA (0,0,0, .1); Kotak-Shadow: 0 2px 2px RGBA (0,0,0, .1);}. Fixed-nav-Appear {Top: 0;}Di atas adalah contoh kode cara menggunakan JS untuk mengimplementasikan navigasi mengambang saat mouse menggulir. Jika Anda tertarik, silakan merujuknya.