หากมีเว็บไซต์ที่มีข้อมูลเยอะๆ เมื่อเราเลื่อนจอลงมาด้านล่างมากๆ แล้ว การจะกลับไปกดเมนูด้านบนอีกรอบ นอกจากจะเสียเวลา เมื่อยนิ้ว แล้วยังอาจทำให้ลูกกลิ้งบนเม้าส์พังได้ง่ายแล้ว (ปัญหาใหญ่เลย 555+) การหาวิธีแก้ไข อาจจะเป็นมีปุ่มเลื่อนจอแทน หรือทำให้เมนูเลื่อนตามลงมา อย่างที่ผมจะแนะนำในวิธีต่อไปนี้ครับ
ตัวอย่างการทำงานของเมนูเลื่อนตาม ก็ดูจากเว็บผมนี้ได้เลย ไม่ต้องไปดูที่ไหนไกล ลองเลื่อนเม้าส์ดูนะครับ
วิธีสร้าง Fixed Menu เมื่อเลื่อนเม้าส์ ด้วย CSS and jQuery
- เบื้องต้น ต้องแน่ใจว่าเว็บเรามี jQuery Library พวกนี้ครับ Google CDN, Miscrosoft CDN และ jQuery CDN.
- ตั้งค่า HTML เบื้องต้น ตัวอย่าง
<div class="nav-container"> <div class="nav"> <ul> <li><a href="">Home</a></li> <li><a href="">CSS</a></li> <li><a href="">PHP</a></li> <li><a href="">SEO</a></li> <li><a href="">jQuery</a></li> <li><a href="">Wordpress</a></li> <li><a href="">Services</a></li> </ul> <div class="clear"></div> /*clear floating div*/ </div> </div>
- ไปตั้งค่า CSS ด้วยครับ
.f-nav{ /* ตั้งค่าเพื่อสร้างคลาสนี้ใหม่ */
z-index: 9999;
position: fixed;
left: 0;
top: 0;
width: 100%;
}
#main-menu-container {
text-align: center; /* Assuming your main layout is centered */
}
.main-menu {
display: inline-block;
width: 100%; /* Your menu's width */
}
- ตั้งค่า Javascript เอาไว้ท้ายในส่วนของ Footer ก็ได้ครับ
<script>
$("document").ready(function($){
var nav = $('#main-menu-container');
$(window).scroll(function () {
if ($(this).scrollTop() > 150) {
nav.addClass("f-nav");
} else {
nav.removeClass("f-nav");
}
});
});
</script>
- scrollTop() > 150 หมายถึง เราเลื่อนเม้าส์มาประมาณ 150 พิกเซล จากบนสุด แล้วเมนูจะเลื่อนขึ้นไปติดขอบบนครับ
ลองเอาไปประยุกต์ใช้ดูได้เลยครับ ผมใช้อันนี้อันเดียว ได้ทั้งบน Mobile ด้วย หากติดปัญหาตรงไหน คอนเม๊นต์ถามไว้ได้ครับ รีบเร่งจริงๆ อีเมลมาถามครับผม
บทความโดย TsupamaN เรียบเรียงจาก sutanaryan.com
Comments