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

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

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

 

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

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

 

 

กระทู้ล่าสุดจากเว็บบอร์ด
หัวข้อกระทู้
ตอบ
เปิดดู
ล่าสุด
อยากทราบวิธีสร้างเว็บหน้าเดียวแบบกรอกข้อมูลเสร็จแล้วประมวลผล
โดย phongkhukhan ส 28 มี.ค. 2020 1:00 am บอร์ด ปัญหาการใช้ phpBB3, SMF, Joomla, Wordpress, CMS, CRM
2
11
ส 28 มี.ค. 2020 1:09 am โดย mindphp
แสดงสินค้าที่อยากได้ใน Wishlist ด้วย Module Wishlist
โดย prmindphp ศ 27 มี.ค. 2020 5:26 pm บอร์ด MindPHP News & Feedback
0
11
ศ 27 มี.ค. 2020 5:26 pm โดย prmindphp
B - package member หน้า Migrate ข้อมูลบัตรประชนซ้ำได้ ต้องทำไม่ได้เเละเก็บ logs ด้วย
โดย thatsawan ศ 27 มี.ค. 2020 4:25 pm บอร์ด ThaiVI (Main)
0
1
ศ 27 มี.ค. 2020 4:25 pm โดย thatsawan
ต้องการสร้าง subtype
โดย blackbullx16 ศ 27 มี.ค. 2020 4:15 pm บอร์ด SQL - Database
0
15
ศ 27 มี.ค. 2020 4:15 pm โดย blackbullx16
อยากทราบวิธีการใช้งาน อีเวน cron ว่ามีการใช้งานอย่างไครับ
โดย Ittichai_chupol ศ 27 มี.ค. 2020 11:10 am บอร์ด Programming - PHP
0
10
ศ 27 มี.ค. 2020 11:10 am โดย Ittichai_chupol
อยากทราบวิธีการแก้ไขการแปลงปีวันที่ใน phpbb ผิด เมื่อกรอกวันที่ 29/02
โดย Ittichai_chupol ศ 27 มี.ค. 2020 10:42 am บอร์ด Programming - PHP
0
7
ศ 27 มี.ค. 2020 10:42 am โดย Ittichai_chupol
อยากทราบวิธีการจะสร้างการทำงานสำหรับการแจ้งเตือนของ Extension ในอีเวน cron
โดย Ittichai_chupol พฤ 26 มี.ค. 2020 10:34 am บอร์ด PHP Knowledge
2
27
พฤ 26 มี.ค. 2020 2:34 pm โดย LEG
แสดงสินค้าขายดีในร้านค้าออนไลน์ด้วย Module MZC Bestseller
โดย prmindphp พ 25 มี.ค. 2020 5:42 pm บอร์ด MindPHP News & Feedback
0
23
พ 25 มี.ค. 2020 5:42 pm โดย prmindphp
อยากทราบวิธีการที่จะสามารถปิดการแสดงของ modules ใน ucp โดยไม่ต้องเข้าไปจัดการในระบบ
โดย Ittichai_chupol พ 25 มี.ค. 2020 1:04 pm บอร์ด Programming - PHP
1
20
พ 25 มี.ค. 2020 1:05 pm โดย Ittichai_chupol
วิธีการสมัครเข้าใช้งาน Skype สำหรับใช้งาน VDO video conference ในมือถือ
โดย numtan5839 พ 25 มี.ค. 2020 11:26 am บอร์ด Microsoft Office Knowledge & line & Etc
1
62
พฤ 26 มี.ค. 2020 2:34 pm โดย LEG
อยากท่องเที่ยวใหว้พระอุดรกับรถเช่าอุดร แนะนำ
โดย udon999 อ 24 มี.ค. 2020 10:49 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
14
อ 24 มี.ค. 2020 10:49 pm โดย udon999
อยากเที่ยวอุดร ลองเช่ารถอุดร ท่องเที่ยวใหว้พระเชิญทางนี้
โดย udon999 อ 24 มี.ค. 2020 9:57 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
17
อ 24 มี.ค. 2020 9:57 pm โดย udon999
แสดงหมวดหมู่สินค้าให้กับร้านค้าออนไลน์ด้วย Module Category
โดย prmindphp อ 24 มี.ค. 2020 5:57 pm บอร์ด MindPHP News & Feedback
0
28
อ 24 มี.ค. 2020 5:57 pm โดย prmindphp
3 การขนส่งสินค้าที่แปลกที่สุดในโลก
โดย ngongsus อ 24 มี.ค. 2020 12:58 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
32
อ 24 มี.ค. 2020 12:58 pm โดย ngongsus
ตะกร้าสินค้าที่บอกรายละเอียดได้มากกว่าแค่ราคาสินค้า Module MooZiiCart - Cart Ext
โดย prmindphp จ 23 มี.ค. 2020 6:21 pm บอร์ด MindPHP News & Feedback
0
55
จ 23 มี.ค. 2020 6:21 pm โดย prmindphp
3 ข้อเท็จจริงอันน่าสนใจเกี่ยวกับไวรัสโคโรนา 2019 (COVID-19)
โดย nemo413 จ 23 มี.ค. 2020 6:05 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
51
จ 23 มี.ค. 2020 6:05 pm โดย nemo413
อยาทราบวิธีการสร้างลิ้งค์ ไปยัง จากส่วนการแจ้งเตือน ไป ยัง Extension ที่อยู่ในส่วนของ ucp
โดย Ittichai_chupol จ 23 มี.ค. 2020 4:28 pm บอร์ด Programming - PHP
1
124
จ 23 มี.ค. 2020 5:01 pm โดย mindphp
วางแผนค่าลดหย่อนภาษีอย่างไรให้ได้ประโยชน์ระยะยาว
โดย medalezga จ 23 มี.ค. 2020 12:09 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
1
30
จ 23 มี.ค. 2020 2:19 pm โดย kreemza123
ประกันสังคมปรับลดอัตราส่งเงิน 4% นาน 6 เดือน เพื่อบรรเทาผลกระทบการแพร่ระบาดโรคไวรัส COVID-19
โดย thatsawan อ 22 มี.ค. 2020 1:48 pm บอร์ด พูดคุยเรื่องทั่วไป จับฉ่าย
0
102
อ 22 มี.ค. 2020 1:48 pm โดย thatsawan
แนะนำสินค้าใหม่ในร้านค้าออนไลน์ของคุณให้น่าสนใจมากขึ้นด้วย Latest Products
โดย prmindphp ศ 20 มี.ค. 2020 5:27 pm บอร์ด MindPHP News & Feedback
0
147
ศ 20 มี.ค. 2020 5:27 pm โดย prmindphp