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

         ในการสร้าง 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

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

 

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

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
วิธีการสร้าง pop-up เพื่อ drag and drop multi image upload บน phpbb
โดย Ittichai_chupol ส 08 ธ.ค. 2018 4:30 pm บอร์ด Programming - PHP
0
25
ส 08 ธ.ค. 2018 4:30 pm โดย Ittichai_chupol
วิธีติดตั้งโปรแกรม Foxit Reader บนระบบปฏิบัติการ Ubuntu 16.04 LTS
โดย tatiya ส 08 ธ.ค. 2018 11:11 am บอร์ด Linux - Web Server
0
17
ส 08 ธ.ค. 2018 11:11 am โดย tatiya
อยากหมดหนี้ฟังทางนี้ ขอโชค ขอลาภกับพระเจ้าตากสิน
โดย Anonymous ศ 07 ธ.ค. 2018 4:40 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
27
ศ 07 ธ.ค. 2018 4:40 pm โดย บุคคลทั่วไป
Extension คืออะไร
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:58 pm บอร์ด phpBB 3.1 Extension Review
0
22
ศ 07 ธ.ค. 2018 2:58 pm โดย จันนุสรณ์ ดีแก่
วิธีตั้งกระทู้ในเว็บบอร์ด phpBB โพสข้อความ รูปภาพ อัพโหลด ใช้ BBcode
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 2:53 pm บอร์ด phpBB user Guide Knowledge
0
35
ศ 07 ธ.ค. 2018 2:53 pm โดย จันนุสรณ์ ดีแก่
Q - Event phpbb ที่แสดงผลตำแหน่ง หัวข้อกระทู้
โดย Ittichai_chupol ศ 07 ธ.ค. 2018 10:43 am บอร์ด Programming - PHP
3
22
ศ 07 ธ.ค. 2018 11:18 am โดย mindphp
ว่าด้วยเรื่องเว็บไซต์
โดย จันนุสรณ์ ดีแก่ ศ 07 ธ.ค. 2018 10:27 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
18
ศ 07 ธ.ค. 2018 10:27 am โดย จันนุสรณ์ ดีแก่
ราศีใด ระวังไฟไหม้บ้าน มีวิญญาณตามติด
โดย Anonymous พฤ 06 ธ.ค. 2018 8:41 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
28
พฤ 06 ธ.ค. 2018 8:41 pm โดย บุคคลทั่วไป
การส่งข้อความ และการเปิดอ่านข้อความ
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 2:27 pm บอร์ด phpBB user Guide Knowledge
0
28
พฤ 06 ธ.ค. 2018 2:27 pm โดย จันนุสรณ์ ดีแก่
HOW TO ออกจากเกมส์
โดย จันนุสรณ์ ดีแก่ พฤ 06 ธ.ค. 2018 11:32 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
29
พฤ 06 ธ.ค. 2018 11:32 am โดย จันนุสรณ์ ดีแก่
Q - ตรวจสอบ ไฟล์รูปภาพในกระทู้ phpbb
โดย Ittichai_chupol พฤ 06 ธ.ค. 2018 11:04 am บอร์ด Programming - PHP
1
26
พฤ 06 ธ.ค. 2018 5:06 pm โดย mindphp
สอบถามเกี่ยวกับการตรวจสอบขนาดของ File หลังจากเพิ่มฟอร์มหน่อยครับ
โดย tomsmile05 พฤ 06 ธ.ค. 2018 10:40 am บอร์ด Programming - PHP
1
27
พฤ 06 ธ.ค. 2018 11:19 am โดย tsukasaz
สาเหตุที่นอนไม่หลับ เป็นเพราะแบบนี้หรือเปล่า เช็คก่อนเกิดอันตราย!
โดย gotoblack พฤ 06 ธ.ค. 2018 8:44 am บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
21
พฤ 06 ธ.ค. 2018 8:44 am โดย gotoblack
ฟังก์ชั่นอีเมลล์ใช้ไม่ได้บน Joomla 4 alpha 3 มีวิธีแก้อย่างไรบ้างค่ะ
โดย pprn พ 05 ธ.ค. 2018 4:32 pm บอร์ด Joomla Development
0
26
พ 05 ธ.ค. 2018 4:32 pm โดย pprn
เช็คดวงราศีเกิด ประจำเดือนธันวาคม 2561
โดย Anonymous อ 04 ธ.ค. 2018 8:34 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
61
อ 04 ธ.ค. 2018 8:34 pm โดย บุคคลทั่วไป
การใช้งาน PM ถ้าคนอ่านยังไม่ได้อ่าน คนส่งสามารถแก้ไขได้
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 7:21 pm บอร์ด phpBB user Guide Knowledge
0
35
อ 04 ธ.ค. 2018 7:21 pm โดย จันนุสรณ์ ดีแก่
การเพิ่มเสียง ลบเสียงรบกวนออก camtasia
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 4:49 pm บอร์ด Graphic design
0
42
อ 04 ธ.ค. 2018 4:49 pm โดย จันนุสรณ์ ดีแก่
อัพเกรด Joomla เวอร์ชัน 3.9.1 แล้ว Error
โดย Parichat อ 04 ธ.ค. 2018 4:17 pm บอร์ด Joomla Development
1
55
อ 04 ธ.ค. 2018 4:18 pm โดย Parichat
การหา Element ของปุ่ม create ในหน้า purchase
โดย Aussadawut อ 04 ธ.ค. 2018 1:27 pm บอร์ด Python Knowledge
0
51
อ 04 ธ.ค. 2018 1:27 pm โดย Aussadawut
เมื่อทำงานไว
โดย จันนุสรณ์ ดีแก่ อ 04 ธ.ค. 2018 1:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
42
อ 04 ธ.ค. 2018 1:25 pm โดย จันนุสรณ์ ดีแก่