Sticky Sidebar
Sticky Sidebar

วิธีทำให้ 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 ก็จะเลื่อนตามหน้าจอตามที่ต้องการ

สำหรับตัวอย่างดูได้ที่นี่

By Tee

One thought on “วิธีทำให้ sidebar เลื่อนตามหน้าจอสำหรับหน้าเว็บที่มีความยาวมากๆ”

Leave a Reply

Your email address will not be published. Required fields are marked *