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