Sticky Sidebar
วิธีทำให้ sidebar เลื่อนตามหน้าจอ
วิธีใช้ก็ง่ายมากครับ เราจะใช้ plugin ของ jquery ที่เรืยกว่า Sticky-kit โหลดได้จากที่นี่นะครับ
http://leafo.net/sticky-kit/#examples
โหลดมาแล้วก็เรียก plugin จากไฟล์ เว็บได้เลยครับ
|
1 2 |
<script src="js/jquery-1.10.2.js"></script> <script src="js/jquery.sticky-kit.min.js"></script> |
ส่วนโครงสร้างเว็บ index.html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<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
|
1 2 3 4 5 6 |
<script type="text/javascript"> // สั่งให้ plugin ทำงาน โดยเลือก .sidebar $(document).ready(function(){ $(".sidebar").stick_in_parent(); }); </script> |
จากตัวอย่างจะเห็นว่าผมเลือกให้ .sidebar ทำงาน ตัว .sidebar ก็จะเลื่อนตามหน้าจอตามที่ต้องการ
ขอบคุณค่ะ