ดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งานดาวไม่ได้ใช้งาน
 

         ในการสร้าง Template เว็บไซต์ ส่วนประกอบที่สำคัญมากๆในหน้าเว็บนั่นคือแถบเมนู ซึ่งมีไว้แสดงชื่อเมนูหน้าต่างๆของเว็บไซต์ เพื่อความสวยงามและสะดวกในการใช้งานแถบเมนู เมื่อเลื่อนเนื้อหาของหน้าเว็บลงมา แถบเมนูก็ควรจะเลื่อนตามหน้าเว็บลงมาด้วยและอยู่ตำแหน่งบนสุด บทความนี้จึงแนะนำวิธีการ Fix ให้แถบเมนูเลื่อนตามหน้าจอ ในมุมมอง Mobile ด้วย JavaScript ซึ่งมีขั้นตอนดังนี้

 

ใส่โค้ดด้านล่างนี้ลงในไฟล์ index.php ของโฟลเดอร์เทมเพลตที่ต้องการนำไปใช้งาน

<script type="text/javascript">
        jQuery(function($) {
		var h = $('.menu-nav-top').closest('.span8').height();
		$('.menu-nav-top').closest('.span8').css('height', h);
		fixmenu();
                $(window).scroll(function() {
			fixmenu();
                });
		function fixmenu() {
			var c = $('.menu-nav-top').closest('.navbar');
			if($(this).scrollTop() > h) {
				if(!c.hasClass('navbar-fixed-top')) {
					c.addClass('navbar-fixed-top');
					c.css('position', 'fixed');
				}
			} else {
				c.removeClass('navbar-fixed-top');
				c.css('position', 'static');
			}
		}
        });
</script>

 

อธิบายโค้ด

1.หาความสูง header menu ของเว็บไซต์

2.กำหนด event(เหตุการณ์) ตอน Scroll เมื่อหน้าจอเลื่อนลงมาเกินส่วนสูงของ menu

3.เพิ่ม class navbar-fixed-top และกำหนด CSS position เป็น fixed

4.ถ้าเลื่อนจอกลับขึ้นไปข้างบน ให้ลบ class navbar-fixed-top และกำหนด CSS position เป็นแบบไม่ fixed

 

ผลลัพธ์หน้าเว็บหลังจากการ Fix แถบเมนูให้เลื่อนตามหน้าจอในมุมมอง Mobile

แสดงแถบเมนูขณะยังไม่เลื่อนเนื้อหาในหน้าเว็บ
แสดงแถบเมนูขณะยังไม่เลื่อนเนื้อหาในหน้าเว็บ

 

แสดงแถบเมนูเมื่อเลื่อนเนื้อหาในหน้าเว็บลงมา
แสดงแถบเมนูเมื่อเลื่อนเนื้อหาในหน้าเว็บลงมา

เนื้อหาเพิ่มเติม

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ตัวช่วยในการคำนวณภาษีรถยนต์
โดย prmindphp พ 13 พฤษภาคม 2020 7:05 pm บอร์ด MindPHP News & Feedback
0
119
พ 13 พฤษภาคม 2020 7:05 pm โดย prmindphp
อยากทราบวิธีการ Export จาก html มาเป็น Excel โดยใช้ php
โดย Ittichai_chupol พ 13 พฤษภาคม 2020 6:26 pm บอร์ด Programming - PHP
2
109
พ 13 พฤษภาคม 2020 7:36 pm โดย Ittichai_chupol
สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ
โดย Anonymous อ 12 พฤษภาคม 2020 11:35 pm บอร์ด HTML CSS
4
220
พ 13 พฤษภาคม 2020 8:52 pm โดย บุคคลทั่วไป
ตั้งค่าความกว้างของรูป 100% ในส่วนเสริม Latest News Enhanced ยังไงครับ
โดย toonytoony2004 จ 11 พฤษภาคม 2020 8:30 pm บอร์ด Joomla Development
1
280
อ 12 พฤษภาคม 2020 2:38 pm โดย tsukasaz
สอบถามวิธีการคำนวน sum(prices) แบบรายปี
โดย Anonymous อ 10 พฤษภาคม 2020 9:25 am บอร์ด Programming - PHP
2
607
อ 12 พฤษภาคม 2020 8:34 am โดย บุคคลทั่วไป
สอบถามการเพิ่มข้อมูลลงฐานข้อมูลค่ะ php, mysql
โดย Anonymous ศ 08 พฤษภาคม 2020 11:20 pm บอร์ด Programming - PHP
12
4957
พ 03 มิ.ย. 2020 9:55 am โดย Sirayu
วิธีบันทึกข้อมูลเข้ารหัสmd5
โดย champp ศ 08 พฤษภาคม 2020 5:55 pm บอร์ด PHP Knowledge
0
1034
ศ 08 พฤษภาคม 2020 5:55 pm โดย champp
human error คืออะไร
โดย champp ศ 08 พฤษภาคม 2020 12:43 pm บอร์ด PHP Knowledge
0
79
ศ 08 พฤษภาคม 2020 12:43 pm โดย champp
Input Type สำหรับใช้งาน
โดย champp ศ 08 พฤษภาคม 2020 12:17 pm บอร์ด PHP Knowledge
0
85
ศ 08 พฤษภาคม 2020 12:17 pm โดย champp
วิธีเปลี่ยนภาพไปเรื่อยๆ ด้วย JavaScript
โดย champp ศ 08 พฤษภาคม 2020 12:14 pm บอร์ด PHP Knowledge
0
83
ศ 08 พฤษภาคม 2020 12:14 pm โดย champp
เครื่องมือในการคำนวณ Bandwidth
โดย prmindphp พฤ 07 พฤษภาคม 2020 6:50 pm บอร์ด MindPHP News & Feedback
0
165
พฤ 07 พฤษภาคม 2020 6:50 pm โดย prmindphp
วิธีตรวจสอบข้อมูลซ้ำ
โดย champp พฤ 07 พฤษภาคม 2020 6:15 pm บอร์ด PHP Knowledge
0
1408
พฤ 07 พฤษภาคม 2020 6:15 pm โดย champp
เขียน CSS ในลักษณะต่างๆ
โดย champp พฤ 07 พฤษภาคม 2020 5:35 pm บอร์ด CSS Knowledge
0
80
พฤ 07 พฤษภาคม 2020 5:35 pm โดย champp
เริ่มเเล้ว "โครงการตู้เย็นข้างบ้านต้านภัย COVID-19" แจกฟรี.. เมล็ดพันธุ์ผักสวนครัวแก่เกษตรกรและประชาชนทั่วไป 10,000 ชุด
โดย thatsawan พ 06 พฤษภาคม 2020 9:55 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
193
พฤ 07 พฤษภาคม 2020 5:05 pm โดย thatsawan
padding ต่างจาก margin อย่างไร
โดย champp พฤ 07 พฤษภาคม 2020 4:49 pm บอร์ด CSS Knowledge
0
168
พฤ 07 พฤษภาคม 2020 4:49 pm โดย champp
IR infrared obstacle detection sensor คืออะไร
โดย champp พฤ 07 พฤษภาคม 2020 4:16 pm บอร์ด IOT - Internet of things
0
81
พฤ 07 พฤษภาคม 2020 4:16 pm โดย champp
ตู้จดหมายแจ้งเตือนผ่านไลน์ได้อย่างไร
โดย champp พฤ 07 พฤษภาคม 2020 3:58 pm บอร์ด IOT - Internet of things
0
146
พฤ 07 พฤษภาคม 2020 3:58 pm โดย champp
วิธีการบันทึกข้อมูลหลายตารางพร้อมกัน
โดย champp พฤ 07 พฤษภาคม 2020 3:39 pm บอร์ด PHP Knowledge
0
1757
พฤ 07 พฤษภาคม 2020 3:39 pm โดย champp
R - เครียร์ข้อมูลทดสอบ ออกจากหน้าเว็บ
โดย mindphp พฤ 07 พฤษภาคม 2020 10:24 am บอร์ด OdooJob.com - Developer
0
1
พฤ 07 พฤษภาคม 2020 10:24 am โดย mindphp
เกษตรกรปลูกพืชเตรียมรับเงินเยียวยา มีขั้นตอนตรวจดังนี้
โดย thatsawan อ 05 พฤษภาคม 2020 5:20 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
143
พ 06 พฤษภาคม 2020 7:53 pm โดย arenaofblood