หากมีเว็บไซต์ที่มีข้อมูลเยอะๆ เมื่อเราเลื่อนจอลงมาด้านล่างมากๆ แล้ว การจะกลับไปกดเมนูด้านบนอีกรอบ นอกจากจะเสียเวลา เมื่อยนิ้ว แล้วยังอาจทำให้ลูกกลิ้งบนเม้าส์พังได้ง่ายแล้ว (ปัญหาใหญ่เลย 555+)  การหาวิธีแก้ไข อาจจะเป็นมีปุ่มเลื่อนจอแทน หรือทำให้เมนูเลื่อนตามลงมา อย่างที่ผมจะแนะนำในวิธีต่อไปนี้ครับ

ตัวอย่างการทำงานของเมนูเลื่อนตาม ก็ดูจากเว็บผมนี้ได้เลย ไม่ต้องไปดูที่ไหนไกล ลองเลื่อนเม้าส์ดูนะครับ

วิธีสร้าง Fixed Menu เมื่อเลื่อนเม้าส์ ด้วย CSS and jQuery

  • เบื้องต้น ต้องแน่ใจว่าเว็บเรามี jQuery Library พวกนี้ครับ Google CDN, Miscrosoft CDN และ jQuery CDN.
  • ตั้งค่า HTML เบื้องต้น ตัวอย่าง

  • ไปตั้งค่า CSS ด้วยครับ

  • ตั้งค่า Javascript เอาไว้ท้ายในส่วนของ Footer ก็ได้ครับ

  • scrollTop() > 150 หมายถึง เราเลื่อนเม้าส์มาประมาณ 150 พิกเซล จากบนสุด แล้วเมนูจะเลื่อนขึ้นไปติดขอบบนครับ

ลองเอาไปประยุกต์ใช้ดูได้เลยครับ ผมใช้อันนี้อันเดียว ได้ทั้งบน Mobile ด้วย หากติดปัญหาตรงไหน คอนเม๊นต์ถามไว้ได้ครับ รีบเร่งจริงๆ อีเมลมาถามครับผม

บทความโดย TsupamaN เรียบเรียงจาก sutanaryan.com

Comments