ให้เรตสมาชิก: 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

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

 

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

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
เมื่อ User ถามหางานที่บันทึกไว้จาก IT
โดย tai14 ศ 19 ต.ค. 2018 3:25 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
ศ 19 ต.ค. 2018 3:25 pm โดย tai14
โปรเจคทั่วไป VS โปรจคที่มีผลกับโบนัส
โดย tai14 ศ 19 ต.ค. 2018 2:23 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
11
ศ 19 ต.ค. 2018 2:23 pm โดย tai14
งานประจำวันที่ 19 ตุลาคม 2561
โดย prakon ศ 19 ต.ค. 2018 10:03 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
11
ศ 19 ต.ค. 2018 7:05 pm โดย prakon
งานประจำวันที่ 19 ตุลาคม 2561
โดย pprn ศ 19 ต.ค. 2018 9:25 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
4
ศ 19 ต.ค. 2018 6:28 pm โดย pprn
งานประจำวันที่ 19 ตุลาคม 2561
โดย Ittichai_chupol ศ 19 ต.ค. 2018 9:09 am บอร์ด M070 - อิทธิชัย ชูผล
1
3
ศ 19 ต.ค. 2018 6:51 pm โดย Ittichai_chupol
งานประจำวันที่ 19 ตุลาคม 2561
โดย tai14 ศ 19 ต.ค. 2018 9:05 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
4
ศ 19 ต.ค. 2018 6:17 pm โดย tai14
งานประจำวันที่ 19 ตุลาคม 2561
โดย tatiya ศ 19 ต.ค. 2018 9:04 am บอร์ด M065 - ตติยะ นาชัย
1
5
ศ 19 ต.ค. 2018 7:01 pm โดย tatiya
งานประจำวันที่ 19 ตุลาคม 2561
โดย nice_13 ศ 19 ต.ค. 2018 8:58 am บอร์ด M071 - พิชญ์สินี คงจร
1
2
ศ 19 ต.ค. 2018 6:37 pm โดย nice_13
Q - วิธีแก้ไข้ error จากการสร้าง extension เพื่อให้แสดง module ที่แถบเมนู ใน PHPBB
โดย Ittichai_chupol พฤ 18 ต.ค. 2018 7:27 pm บอร์ด Programming - PHP
2
21
ศ 19 ต.ค. 2018 2:39 pm โดย Ittichai_chupol
มาดูปัญหาจอคอมที่แผนกไอทีต้องเจอ
โดย tai14 พฤ 18 ต.ค. 2018 6:15 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
24
พฤ 18 ต.ค. 2018 6:15 pm โดย tai14
กดลงทะเบียนสมาชิกหน้าเว็บไม่ได้
โดย Kritsana Leesakul พฤ 18 ต.ค. 2018 6:10 pm บอร์ด Joomla Development
6
29
ศ 19 ต.ค. 2018 2:37 pm โดย Kritsana Leesakul
อยากได้เทมเพลตทำเว็บe-commerce
โดย Kritsana Leesakul พฤ 18 ต.ค. 2018 6:02 pm บอร์ด Joomla Development
1
10
พฤ 18 ต.ค. 2018 11:13 pm โดย mindphp
VDO - รีวิว Module product labels (โมดูล โปรดักส์ เลเบลส์) สำหรับแสดงสินค้าที่ติดป้ายกำกับ
โดย pprn พฤ 18 ต.ค. 2018 5:59 pm บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
0
4
พฤ 18 ต.ค. 2018 5:59 pm โดย pprn
งานประจำวันที่ 18 ตุลาคม 2561
โดย pprn พฤ 18 ต.ค. 2018 10:11 am บอร์ด MT25 - นางสาวปรียากมล รินนาศักดิ์
1
9
พฤ 18 ต.ค. 2018 7:12 pm โดย pprn
งานประจำวันที่ 18 ตุลาคม 2561
โดย Ittichai_chupol พฤ 18 ต.ค. 2018 10:08 am บอร์ด M070 - อิทธิชัย ชูผล
1
4
พฤ 18 ต.ค. 2018 7:33 pm โดย Ittichai_chupol
งานประจำวันที่ 18 ตุลาคม 2561
โดย tai14 พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT26 - นางสาวอัครยุภา ยงยุทธ
1
8
พฤ 18 ต.ค. 2018 7:27 pm โดย tai14
VDO - วิธีการแปลงไฟล์ไพธอนเป็นไฟล์ .exe
โดย prakon พฤ 18 ต.ค. 2018 10:04 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
9
ศ 19 ต.ค. 2018 10:43 am โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย prakon พฤ 18 ต.ค. 2018 10:00 am บอร์ด MT24 - นายปกรณ์ วิริยะธนวิโรจน์
1
12
พฤ 18 ต.ค. 2018 7:18 pm โดย prakon
งานประจำวันที่ 18 ตุลาคม 2561
โดย nice_13 พฤ 18 ต.ค. 2018 9:55 am บอร์ด M071 - พิชญ์สินี คงจร
2
8
พฤ 18 ต.ค. 2018 7:08 pm โดย nice_13
เเนะนำเรียนต่อต่างประเทศ
โดย Anonymous พ 17 ต.ค. 2018 10:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
10
พ 17 ต.ค. 2018 10:09 pm โดย บุคคลทั่วไป