หากมีเว็บไซต์ที่มีข้อมูลเยอะๆ เมื่อเราเลื่อนจอลงมาด้านล่างมากๆ แล้ว การจะกลับไปกดเมนูด้านบนอีกรอบ นอกจากจะเสียเวลา เมื่อยนิ้ว แล้วยังอาจทำให้ลูกกลิ้งบนเม้าส์พังได้ง่ายแล้ว (ปัญหาใหญ่เลย 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

The post วิธีสร้าง Fixed Menu เมื่อเลื่อนเม้าส์ ด้วย CSS and jQuery appeared first on TsupamaN.com.