ทำไมถึงมีความต้องการเช่นนี้? คุณพบเว็บไซต์บางแห่งในต่างประเทศหรือไม่เมื่อคุณเลื่อนขึ้นแถบนำทางจะลอยอยู่ที่ตำแหน่งสูงสุด หากผู้ใช้ต้องการดูเนื้อหาพวกเขาสามารถคลิกเพื่อเข้าถึงโดยตรงซึ่งจะช่วยประหยัดเวลาในการลากมาก แน่นอนว่ามันง่ายกว่าที่จะกลับไปที่ด้านบน แต่บางครั้งปุ่มกลับไปด้านบนมักถูกมองข้าม มาดูรหัสและการสาธิต ( แนะนำ jQuery 1.9 )
ในการตรวจสอบว่าเมาส์เลื่อนขึ้นหรือเลื่อนลงคุณสามารถเปรียบเทียบพิกัดของการเลื่อนครั้งสุดท้ายของผู้ใช้กับพิกัดในครั้งต่อไป เมื่อครั้งสุดท้ายน้อยกว่าครั้งต่อไปนั่นคือผู้ใช้เลื่อนลงมิฉะนั้นหมายความว่าผู้ใช้เลื่อนขึ้น ค่าพิกัดการเลื่อนสามารถใช้เป็น scrolltop ของหน้าต่าง
ตัวอย่างรหัส HTML
<div id = "jnav"> <ul> <li> <a href = "http://caibaojian.com/"> การพัฒนาเว็บ front-end </a> </li> <li> <a href = "#"> บล็อกการพัฒนาด้านหน้า </a> </li> <li> href = "#"> การพัฒนาส่วนหน้า </a> </li> <li> <a href = "#"> การพัฒนา front-end </a> </li></ul> </div>
ตัวอย่างรหัส JavaScript
var $ nav = $ ('#jnav'), navtop = $ nav.offset (). ด้านบน, navh = $ nav.outerheight (), wintop_1 = 0, winwidth = $ (หน้าต่าง) .width (), holder = jQuery ('<div>'); $ (หน้าต่าง) Holder.css ('ความสูง', Navh); เมาส์เพื่อเลื่อนขึ้นและแสดงผลถ้า (wintop_2> wintop_1 && winwidth> 980) {$ nav.removeclass ('applem-nav-appear');ตัวอย่างรหัส CSS
.NAV {WIDTH: 980PX; ระยะขอบ: 0 auto;}. nav li {display: inline-block; *แสดง: อินไลน์; *ซูม: 1; ระยะขอบ: 0 10px;}. nav li a {display: block; Padding: 5px 10px;}. คงที่ -NAV {ตำแหน่ง: แก้ไข; ความกว้าง: 100%; ด้านบน: -40px; -webkit-transition: Top .5s; -MOZ-TRANSITION: TOP .5S; -O-Transition: Top .5s; การเปลี่ยนแปลง: ด้านบน. 5s; -webkit-box-shadow: 0 2px 2px RGBA (0,0,0, .1); -moz-box-shadow: 0 2px 2px RGBA (0,0,0, .1); Box-Shadow: 0 2px 2px RGBA (0,0,0, .1);}. คงที่-NAV-appear {top: 0;}ด้านบนเป็นรหัสตัวอย่างของวิธีการใช้ JS เพื่อใช้การนำทางลอยเมื่อเมาส์เลื่อนขึ้น หากคุณสนใจโปรดดูที่