PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

แนวทาง การเลื่อนแล้ว fixed ตำแหน่งเนื้อหาที่ต้องการ ด้วย jQuery

22 September 2011 By


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

Tags:: jquery fixed ตำแหน่ง การเลื่อน





URL สำหรับอ้างอิง