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

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

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

 

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

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
ขอความช่วยเหลือ PyCharm
โดย kaao_19 จ 18 พฤษภาคม 2020 10:35 pm บอร์ด Programming - C/C++ & java & Python
2
967
อ 19 พฤษภาคม 2020 1:23 am โดย kaao_19
สรุปการเรียนรู้ประจำวัน 18/05/63
โดย sirirat จ 18 พฤษภาคม 2020 9:42 pm บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
13
จ 18 พฤษภาคม 2020 9:42 pm โดย sirirat
มาทำความรู้จักกับจังหวัดกระบี่ สำหรับผู้สนใจจะมาท่องเที่ยว
โดย sirirat จ 18 พฤษภาคม 2020 5:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
47
จ 18 พฤษภาคม 2020 5:05 pm โดย sirirat
สอบถาม ผมกำลังทำ gitlab CI สร้างไฟล์ yml มาแล้วแต่ตอนทำงานมันเป็นแบบนี้ครับเป็นเพราะอะไรครับ
โดย jirawoot จ 18 พฤษภาคม 2020 5:04 pm บอร์ด Programming - C/C++ & java & Python
1
116
อ 19 พฤษภาคม 2020 7:33 pm โดย jirawoot
วิธีการเดินทางจาก จ.กระบี่ มา กทม.
โดย sirirat จ 18 พฤษภาคม 2020 2:49 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
45
จ 18 พฤษภาคม 2020 2:49 pm โดย sirirat
อยากทราบวิธีการ แปลง ไฟล์ html มาเป็น pdf
โดย Ittichai_chupol จ 18 พฤษภาคม 2020 12:26 pm บอร์ด Programming - PHP
2
53
พ 20 พฤษภาคม 2020 1:39 pm โดย Ittichai_chupol
งานประจำวันที่ 18 พฤษภาคม 2563
โดย sirirat จ 18 พฤษภาคม 2020 10:50 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
3
43
จ 18 พฤษภาคม 2020 6:43 pm โดย sirirat
list ความรู้ที่มี ว่าเคยเรียน หรือ เคยทำอะไรมาบ้าง
โดย sirirat จ 18 พฤษภาคม 2020 10:48 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
3
40
จ 18 พฤษภาคม 2020 11:03 am โดย sirirat
NOTE
โดย sirirat จ 18 พฤษภาคม 2020 10:47 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
3
จ 18 พฤษภาคม 2020 10:47 am โดย sirirat
Work's on Hand ศิริรัตน์ ทิพย์น้อย M102
โดย sirirat จ 18 พฤษภาคม 2020 10:46 am บอร์ด M102 - ศิริรัตน์ ทิพย์น้อย
0
8
จ 18 พฤษภาคม 2020 10:46 am โดย sirirat
เปิดให้ลงทะเบียนร้านค้าแล้วที่ www.ไทยชนะ.com พร้อมรับ New Normal ควมคุมโรคระบาดโควิด 19
โดย thatsawan ส 16 พฤษภาคม 2020 6:01 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
105
ส 16 พฤษภาคม 2020 6:01 pm โดย thatsawan
B - เข้าสู่ระบบเอง เเละออกจากหน้าเว็บไม่ได้
โดย thatsawan ศ 15 พฤษภาคม 2020 7:00 pm บอร์ด Odoojob.com - Tester
1
5
ศ 15 พฤษภาคม 2020 8:03 pm โดย thatsawan
SSL หมดอายุ Enginx โชว์ข้อความ This is a placeholder for the subdomain โดเมน.com ที่มีปัญหา
โดย mindphp พฤ 14 พฤษภาคม 2020 5:58 pm บอร์ด Linux - Web Server
0
147
พฤ 14 พฤษภาคม 2020 5:58 pm โดย mindphp
ตัวช่วยในการคำนวณภาษีรถยนต์
โดย prmindphp พ 13 พฤษภาคม 2020 7:05 pm บอร์ด MindPHP News & Feedback
0
95
พ 13 พฤษภาคม 2020 7:05 pm โดย prmindphp
อยากทราบวิธีการ Export จาก html มาเป็น Excel โดยใช้ php
โดย Ittichai_chupol พ 13 พฤษภาคม 2020 6:26 pm บอร์ด Programming - PHP
2
74
พ 13 พฤษภาคม 2020 7:36 pm โดย Ittichai_chupol
สอบถามวิธีการทำให้หน้าเว็บปรับขนาดตามจอค่ะ
โดย Anonymous อ 12 พฤษภาคม 2020 11:35 pm บอร์ด HTML CSS
4
183
พ 13 พฤษภาคม 2020 8:52 pm โดย บุคคลทั่วไป
ตั้งค่าความกว้างของรูป 100% ในส่วนเสริม Latest News Enhanced ยังไงครับ
โดย toonytoony2004 จ 11 พฤษภาคม 2020 8:30 pm บอร์ด Joomla Development
1
253
อ 12 พฤษภาคม 2020 2:38 pm โดย tsukasaz
สอบถามวิธีการคำนวน sum(prices) แบบรายปี
โดย Anonymous อ 10 พฤษภาคม 2020 9:25 am บอร์ด Programming - PHP
2
566
อ 12 พฤษภาคม 2020 8:34 am โดย บุคคลทั่วไป
สอบถามการเพิ่มข้อมูลลงฐานข้อมูลค่ะ php, mysql
โดย Anonymous ศ 08 พฤษภาคม 2020 11:20 pm บอร์ด Programming - PHP
12
4861
พ 03 มิ.ย. 2020 9:55 am โดย Sirayu
วิธีบันทึกข้อมูลเข้ารหัสmd5
โดย champp ศ 08 พฤษภาคม 2020 5:55 pm บอร์ด PHP Knowledge
0
1009
ศ 08 พฤษภาคม 2020 5:55 pm โดย champp