ให้เรตสมาชิก: 0 / 5

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

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

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

 

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

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
งานประจำวันที่ 16 ตุลาคม 2561
โดย tai14 อ 16 ต.ค. 2018 9:50 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
0
1
อ 16 ต.ค. 2018 9:50 am โดย tai14
งานประจำวันที่ 16 ตุลาคม 2561
โดย nice_13 อ 16 ต.ค. 2018 9:48 am บอร์ด M071 - พิชญ์สินี คงจร
0
1
อ 16 ต.ค. 2018 9:48 am โดย nice_13
งานประจำวันที่ 16 ตุลาคม 2561
โดย Ittichai_chupol อ 16 ต.ค. 2018 9:39 am บอร์ด M070 - อิทธิชัย ชูผล
0
2
อ 16 ต.ค. 2018 9:39 am โดย Ittichai_chupol
วิธีแก้ปัญหา ปัญหา string conversion [phpBB Debug] PHP Notice: ใน phpBB 3
โดย mindphp จ 15 ต.ค. 2018 12:27 pm บอร์ด Programming - PHP
1
12
จ 15 ต.ค. 2018 12:28 pm โดย mindphp
Review C71 Barcode Mobile Computer Android 4G 1D&2D Scan Head HF RFID/NFC Fingerprint/Iris InfraRed/PSAM Camera/GPS
โดย Barcode Retail จ 15 ต.ค. 2018 12:09 pm บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
13
จ 15 ต.ค. 2018 12:09 pm โดย Barcode Retail
Chainway C71 Barcode Mobile Computer Android 6.0 OS 4G/Dual-band WIFI 5.2'' IPS 1080P Screen 5000mAh Powerful Battery IP
โดย Barcode Retail จ 15 ต.ค. 2018 11:54 am บอร์ด ถาม - ตอบ คอมพิวเตอร์
0
15
จ 15 ต.ค. 2018 11:54 am โดย Barcode Retail
Restore ฐานข้อมูลขนาดใหญ่ ที่ backup มาจาก mysqldump
โดย mindphp จ 15 ต.ค. 2018 11:53 am บอร์ด SQL Knowledge
0
54
จ 15 ต.ค. 2018 11:53 am โดย mindphp
งานประจำวันที่ 15 ตุลาคม 2561
โดย Ittichai_chupol จ 15 ต.ค. 2018 10:15 am บอร์ด M070 - อิทธิชัย ชูผล
1
7
จ 15 ต.ค. 2018 11:14 am โดย mindphp
php เมื่อเลือกข้อมูลใน select แล้ว text กรอกได้แค่อักษร
โดย pppp อ 14 ต.ค. 2018 1:51 pm บอร์ด JavaScript & Jquery Ajax
0
16
อ 14 ต.ค. 2018 1:51 pm โดย pppp
Q - วิธีการ Add Module แล้วในไปแสดงที่แถบเมนูในส่วนของหน้า ACP ในphpbb
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:50 pm บอร์ด Programming - PHP
9
71
ศ 12 ต.ค. 2018 6:43 pm โดย thatsawan
การทำไอศครีม กระทิ
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:14 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
25
ศ 12 ต.ค. 2018 5:14 pm โดย Ittichai_chupol
VDO - Module Search (โมดูล เสิร์ช) สำหรับค้นหาสินค้าในร้านค้า
โดย pprn ศ 12 ต.ค. 2018 5:14 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
ศ 12 ต.ค. 2018 5:14 pm โดย pprn
การทำขนมตาล
โดย Ittichai_chupol ศ 12 ต.ค. 2018 5:13 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
23
ศ 12 ต.ค. 2018 5:13 pm โดย Ittichai_chupol
VDO - รีวิว Module Category (โมดูล แคตตากอรี่) สำหรับแสดงหมวดหมู่สินค้า
โดย pprn ศ 12 ต.ค. 2018 4:28 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
3
ศ 12 ต.ค. 2018 4:28 pm โดย pprn
งานประจำวันที่ 12 ตุลาคม 2561
โดย nice_13 ศ 12 ต.ค. 2018 9:48 am บอร์ด M071 - พิชญ์สินี คงจร
1
4
ศ 12 ต.ค. 2018 8:29 pm โดย nice_13
งานประจำวันที่ 12 ตุลาคม 2561
โดย prakon ศ 12 ต.ค. 2018 9:47 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
6
ศ 12 ต.ค. 2018 6:58 pm โดย prakon
งานประจำวันที่ 12 ตุลาคม 2561
โดย pprn ศ 12 ต.ค. 2018 9:09 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
4
ศ 12 ต.ค. 2018 6:12 pm โดย pprn
งานประจำวันที่ 12 ตุลาคม 2561
โดย Ittichai_chupol ศ 12 ต.ค. 2018 9:01 am บอร์ด M070 - อิทธิชัย ชูผล
2
9
ศ 12 ต.ค. 2018 6:37 pm โดย thatsawan
การทำขนมฝอยทอง
โดย Ittichai_chupol พฤ 11 ต.ค. 2018 5:45 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
38
พฤ 11 ต.ค. 2018 5:58 pm โดย daday0807
VDO - รีวิว Module Cart (โมดูล คาร์ท) บอกจำนวนสินค้าและราคาสินค้าในตะกร้าผู้ใช้
โดย pprn พฤ 11 ต.ค. 2018 3:41 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
5
พฤ 11 ต.ค. 2018 3:41 pm โดย pprn