แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery เหมือนโฆษณาบนเฟสบุ๊ค

วันนี้เว็บไซต์ PrettyHD จะมาอัพเดทบทความเกี่ยวกับ ทริปปรับแต่ง Blogger อัพเดทเรื่อง ทริปปรับแต่ง Blogger แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery เหมือนโฆษณาบนเฟสบุ๊ค วันเสาร์ที่ 25 พฤษภาคม พ.ศ. 2556 ซึ่งมีเนื้อหามีดังนี้

ตัวอย่างโค้ดต่อไปนี้ เป็นแนวทางสำหรับการสร้างส่วนของเนื้อหาให้สามารถ 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>

ตัวอย่าง http://www.ninenik.com/demo/fixed_float_when_scroll.php

เอาไปใช้งานโค้ดนี้ได้เลย

หากต้องการทราบการอัพเดทของ ทริปปรับแต่ง Blogger แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery เหมือนโฆษณาบนเฟสบุ๊ค และเรื่องที่เกี่ยวข้อง แนะนำให้กด ที่ facebook ด้านล่างนี้เลยค่ะ เผื่อที่จะได้อัพเดทก่อนใคร

อัพเดทเมื่อ วันเสาร์ที่ 25 พฤษภาคม พ.ศ. 2556 ในหมวดหมู่ของ ทริปปรับแต่ง Blogger เรื่อง ทริปปรับแต่ง Blogger แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery เหมือนโฆษณาบนเฟสบุ๊ค

LabelsHD