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

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

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

 

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

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ร่วมใจให้ชุมชนดีเด่นกับโครงการธนาคารเห็ด
โดย medalezga จ 13 ก.ค. 2020 12:12 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
7
จ 13 ก.ค. 2020 12:12 pm โดย medalezga
การนำเอาข้อมูลหลายๆ Sheet(Excel ) มารวมกันด้วย Power Query
โดย Phakakrong จ 13 ก.ค. 2020 11:37 am บอร์ด Microsoft Office Knowledge & line & Etc
0
3
จ 13 ก.ค. 2020 11:37 am โดย Phakakrong
งานประจำวันที่ 13 กรกฏาคม 2563
โดย Phakakrong จ 13 ก.ค. 2020 9:43 am บอร์ด M105 - ผกากรอง กุสาวดี
3
16
จ 13 ก.ค. 2020 11:17 am โดย Phakakrong
ถ้าต้องการจะส่งเมล เเล้วแนบไฟล์ไปด้วยใน phpbb ทำยังไงคะ
โดย thatsawan ส 11 ก.ค. 2020 11:33 am บอร์ด Programming - PHP
5
87
จ 13 ก.ค. 2020 12:13 pm โดย mindphp
การเพิ่มกรอบจอโทรศัพท์มือถือบน Google Chrome
โดย natthanit.r2538 ส 11 ก.ค. 2020 10:41 am บอร์ด Share Knowledge
0
14
ส 11 ก.ค. 2020 10:41 am โดย natthanit.r2538
งานประจำวันที่ 11 กรกฏาคม 2563
โดย Phakakrong ส 11 ก.ค. 2020 9:22 am บอร์ด M105 - ผกากรอง กุสาวดี
3
22
ส 11 ก.ค. 2020 6:48 pm โดย Phakakrong
ถ้าต้องการเช็คค่าว่าง select ให้ alert ก่อนก่อนปุ่มอื่นๆ ทำยังไงได้บ้างคะ
โดย thatsawan ศ 10 ก.ค. 2020 4:18 pm บอร์ด JavaScript & Jquery Ajax
1
32
ศ 10 ก.ค. 2020 4:59 pm โดย tsukasaz
งานประจำวันที่ 10 กรกฏาคม 2563
โดย Phakakrong ศ 10 ก.ค. 2020 9:35 am บอร์ด M105 - ผกากรอง กุสาวดี
5
23
ศ 10 ก.ค. 2020 7:58 pm โดย Phakakrong
Google Sheet : วิธีการเปลี่ยนภาษา (ไทย เป็น อังกฤษ)
โดย Phakakrong พฤ 09 ก.ค. 2020 6:34 pm บอร์ด Share Knowledge
0
24
พฤ 09 ก.ค. 2020 6:34 pm โดย Phakakrong
มาลองใช้งาน Google Drive กันแบบฉบับง่ายๆ
โดย Phakakrong พฤ 09 ก.ค. 2020 4:08 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
24
พฤ 09 ก.ค. 2020 4:08 pm โดย Phakakrong
ข้อมูลไม่ขึ้นมาแสดง รบกวนช่วยดูโค้ดให้ทีคะ คือทำหน้าแบบฟอร์ม แล้วต้องการแก้ไขข้อมูลตามไอดี
โดย Jakkrit Saengngoenon พฤ 09 ก.ค. 2020 1:24 pm บอร์ด Programming - PHP
0
31
พฤ 09 ก.ค. 2020 1:24 pm โดย Jakkrit Saengngoenon
งานประจำวันที่ 9 กรกฏาคม 2563
โดย Phakakrong พฤ 09 ก.ค. 2020 9:40 am บอร์ด M105 - ผกากรอง กุสาวดี
1
28
พฤ 09 ก.ค. 2020 6:51 pm โดย Phakakrong
สรุปผลการเรียน Process help desk
โดย Phakakrong พ 08 ก.ค. 2020 7:05 pm บอร์ด M105 - ผกากรอง กุสาวดี
1
11
พฤ 09 ก.ค. 2020 10:29 am โดย Phakakrong
ISO 29110 คืออะไร มาตรฐานที่ให้การรับรองคุณภาพการบริหารงาน หรือผลิตภัณฑ์ซอร์ฟแวร์ มีขั้นตอนการขออย่างไหร่
โดย natthanit.r2538 พ 08 ก.ค. 2020 7:02 pm บอร์ด Microsoft Office Knowledge & line & Etc
1
38
พ 08 ก.ค. 2020 9:59 pm โดย UoIU112
การ Link ข้อมูลข้าม Sheet /ข้ามไฟล์ ใน Excel แบบง่ายๆ
โดย Phakakrong พ 08 ก.ค. 2020 6:55 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
28
พ 08 ก.ค. 2020 6:55 pm โดย Phakakrong
ข้อควรรู้เกี่ยวกับการลดหย่อนภาษีด้วยเงินบริจาคมูลนิธิ
โดย medalezga พ 08 ก.ค. 2020 1:55 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
23
พ 08 ก.ค. 2020 1:55 pm โดย medalezga
แนะนำ 10 โปรแกรมตัดต่อวิดีโอบน PC ทั้งฟรีและเสียเงิน
โดย Phakakrong พ 08 ก.ค. 2020 1:30 pm บอร์ด Microsoft Office Knowledge & line & Etc
0
30
พ 08 ก.ค. 2020 1:30 pm โดย Phakakrong
งานประจำวันที่ 8 กรกฏาคม 2563
โดย Phakakrong พ 08 ก.ค. 2020 9:28 am บอร์ด M105 - ผกากรอง กุสาวดี
3
42
พ 08 ก.ค. 2020 7:16 pm โดย Phakakrong
SMS Gateway คืออะไร
โดย natthanit.r2538 อ 07 ก.ค. 2020 5:11 pm บอร์ด Microsoft Office Knowledge & line & Etc
1
49
พ 08 ก.ค. 2020 5:15 pm โดย natthanit.r2538
ใบเสนอราคา (Quotation) คืออะไร
โดย Phakakrong อ 07 ก.ค. 2020 4:55 pm บอร์ด Share Knowledge
0
54
อ 07 ก.ค. 2020 4:55 pm โดย Phakakrong