วิธีทำให้ sidebar เลื่อนตามหน้าจอ
วิธีใช้ก็ง่ายมากครับ เราจะใช้ plugin ของ jquery ที่เรืยกว่า Sticky-kit โหลดได้จากที่นี่นะครับ
http://leafo.net/sticky-kit/#examples
โหลดมาแล้วก็เรียก plugin จากไฟล์ เว็บได้เลยครับ
<script src="js/jquery-1.10.2.js"></script> <script src="js/jquery.sticky-kit.min.js"></script>
ส่วนโครงสร้างเว็บ index.html
<body>
<div class="container">
<div class="sidebar">
<h1>Side Bar</h1>
...
</div>
<div class="content">
<h1>Content</h1>
...
</div>
<div class="footer">Design by AT Design</div>
</div>
</body>
เมื่อโหลด plugin เสร็จแล้วก็ ใส่ code สั่งให้ plugin ทำงาน ด้วยการใส่ code
<script type="text/javascript">
// สั่งให้ plugin ทำงาน โดยเลือก .sidebar
$(document).ready(function(){
$(".sidebar").stick_in_parent();
});
</script>
จากตัวอย่างจะเห็นว่าผมเลือกให้ .sidebar ทำงาน ตัว .sidebar ก็จะเลื่อนตามหน้าจอตามที่ต้องการ
ขอบคุณค่ะ