ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการสร้างส่วนของเนื้อหาให้สามารถ fixed ตำแหน่ง
เมื่อมีการเลื่อน scrollbar ของหน้าเพจนั้น ถึงตำแหน่งที่เรากำหนด และ ส่วนของเนื้อหานั้น
จะกลับมาอยู่ตำแหน่งเดิม เมื่อการเลื่อน scrollbar หน้าเพจนั้น ไม่เข้าเงื่อนไข
โค้ดทั้งหมด ดูตัวอย่าง ได้จากล๊งค์ด้านล่าง
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><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">$(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> |
