แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery
22 September 2011ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการสร้างส่วนของเนื้อหาให้สามารถ fixed ตำแหน่ง
เมื่อมีการเลื่อน scrollbar ของหน้าเพจนั้น ถึงตำแหน่งที่เรากำหนด และ ส่วนของเนื้อหานั้น
จะกลับมาอยู่ตำแหน่งเดิม เมื่อการเลื่อน scrollbar หน้าเพจนั้น ไม่เข้าเงื่อนไข
โค้ดทั้งหมด ดูตัวอย่าง ได้จากล๊งค์ด้านล่าง
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fixed position when scroll</title>
<style type="text/css">
html,body{
background-color:#CCC;
padding:0px;
margin:0px;
}
div.main_test{
position:relative;
background-color:#999;
margin:auto;
width:800px;
}
div.top_sector{
position:relative;
display:block;
width:100%;
height:75px;
background-color:#036;
color:#FFF;
}
/* css ส่วนของเนื้อหาที่ต้องการในตรึง เมื่อเลือน scroll ถึงตำแหน่งที่ต้องการ */
div.my_float_div{
position:relative;
display:block;
width:250px;
height:160px;
background-color:#DCDCF5;
color:#000;
padding:5px;
}
</style>
</head>
<body>
<div class="main_test">
<div class="top_sector">Top Sector</div>
<br />
<?php
// php สร้างบรรทัดใหม่ สำหรับทดสอบ
for($i=1;$i<=10;$i++){ ?>
<?=$i?>.<br />
<?php } ?>
<div class="my_float_div">
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
Data Content 1<br />
</div>
<?php
// php สร้างบรรทัดใหม่ สำหรับทดสอบ
for($i=11;$i<=100;$i++){ ?>
<?=$i?>.<br />
<?php } ?>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(function(){
// เงื่อนไข event เมื่อมีการเลื่อน scrollbar ในหน้าเพจ
$(window).scroll(function(){
// เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่งที่มากกว่าหรือเท่ากับตำแหน่งที่ต้องการ
// เมื่อเลื่อน scroll bar หน้าเพจ ถึงตำแหน่ง ที่ทำให้ div
// class ชื่อ my_float_div ชิดขอบบนพอดี หาจากคำสั่ง
// console.log($(document).scrollTop());
if($(document).scrollTop()>270){
$(".my_float_div").css({ /* */
'position':'fixed',
'top':'0px'
});
}else{ // เลื่อนกลับมาอยู่ตำแหน่งเดิม ถ้าไม่อยู่ในเงื่อนไข
$(".my_float_div").css({
'position':'relative'
});
}
});
});
</script>
</body>
</html>
บทความในหมวดที่่น่าสนใจ อื่นๆ
บทความคนเข้าอ่านวันนี้
07 Jun 09 กำหนดรายการใน listbox ที่ 2 จากเงื่อนไขการเลือก listbox ที่ 1 ด้วย ajax ใน jquery อย่างง่าย อ่าน 5731 04 Jan 10 ดึงไฟล์ xml (rss) ไฟล์แบบ cross domain มาแสดงด้วย ajax ใน jQuery อย่างง่าย อ่าน 3700 06 Sep 10 ประยุกต์ การ invite friends ใน facebook มาใช้งาน อ่าน 3371 11 Dec 09 ทบทวน การเรียกใช้งาน events ใน javascript ที่ใช้ได้สำหรับ ทุก browsers อ่าน 2254 30 Oct 09 ฟังก์ชัน PHP แปลงตัวเลขอาราบิก เป็น ตัวเลขไทย อย่างง่าย อ่าน 1217 21 Mar 11 การสร้างปุ่ม facebook ล็อกอิน เว็บไซต์ แบบแสดงรูป และกำหนดเพิ่มเติม อ่าน 2701 10 Dec 09 ประยุกต์ เทคนิค jQuery เลื่อน scrollbar ขึ้นลง ตามเมาส์ สำหรับ div และ textarea อ่าน 4078 29 Mar 10 สร้างฟอร์ม ดึง พิกัด ค่า latitude และ longitude จาก google map อ่าน 6781 22 Jan 11 การอัพเดท สถานะ facebook อัตโนมัติ ผ่านทางอีเมลล์ อ่าน 1988 04 Nov 10 การสร้าง json ไฟล์ จากฐานข้อมูล ด้วย php และการใช้งานด้วย jQuery getJSON() อ่าน 3389 16 Jul 11 แทรก +1 button ในเว็บจาก google plus อ่าน 1037 10 May 10 แก้ปัญหา ปุ่ม back ปุ่ม forward กับการใช้งาน ajax โหลดหน้าเพจ ด้วย jQuery plugin อย่างง่าย อ่าน 3326 24 Feb 10 เทคนิค สร้าง effect add to cart ด้วย jQuery อย่างง่าย อ่าน 4610 02 May 10 ใช้งาน ajax ใน jQuery ดึงข้อมูลจากฐานข้อมูลมาแสดง ใน tooltip อ่าน 6088 25 Sep 08 มารู้จัก effect ของ jquery อย่างง่าย ตอนที่ 3 อ่าน 3815 06 Jun 11 แนวทางการกำหนด expired header ให้กับรูปภาพ ด้วย php อย่างง่าย อ่าน 816 19 Jul 10 การนำ ระบบสมาชิก ของ facebook มาประยุกต์ใช้ อ่าน 5672 13 Oct 08 คำสั่ง SQL AND OR อ่าน 3127 20 Mar 11 กำหนด รายละเอียด การใช้งาน facebook login button เพิ่มเติม อ่าน 1763 24 Feb 09 การใช้งาน CSS สำหรับกำหนดตำแหน่งตรึงไว้ชิดขอบล่าง อ่าน 4120