sticky.js jQuery plugin กำหนดตำแหน่ง menu,sidebar ไม่ให้เลื่อนตาม scroll

🕑 21 เม.ย. 2562

ถ้าใครกำลังหาวิธีทำให้ html tag เช่น menu,sidebar ไม่ให้เลื่อนตาม scroll bar อยู่ล่ะก็ลองใช้ sticky.js jQuery plugin ดูแล้วคุณจะไม่ผิดหวัง

sticky.js ใช้สัญญาอนุญาติแบบ MIT License สามารถนำไปใช้เชิงพาณิชย์ได้ครับ

sticky.js สามารถนำไปใช้เชิงพาณิชย์ได้

ตัวอย่างการใช้งาน sticky.js

1.ระบุ path jquery

<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>

2.ระบุ path sticky.js

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>

3.เรียกใช้งาน plugin sticky.js

$("#sticker").sticky({topSpacing:0});

ตัวอย่าง code การใช้งาน sticky.js ลองเอาไปรันทดสอบกันดู

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.sticky/1.0.4/jquery.sticky.min.js"></script>
    <script>
      $(document).ready(function(){
        $("#sticker").sticky({topSpacing:0,bottomSpacing:20});
        $('#sticker').on('sticky-start', function() { console.log("Started"); });
        $('#sticker').on('sticky-end', function() { console.log("Ended"); });
        $('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
        $('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });
      });
    </script>
  </head>
  <body>
    <div style="background-color:#0f0;height:100px;" id="sticker">
      header
    </div>
    <div style="background-color:#000;min-height:1280px">
      body
    </div>
    <div style="background-color:#ff0000;height:100px;">
      footer
    </div>
  </body>
</html>

การยกเลิก

<script>
  $("#sticker").unstick();
</script>

Options ของ sticky.js

topSpacing: (default: 0) กำหนดตำแหน่งให้ html element ของเราว่าจะให้อยู่ห่างจากด้านบนของเพจกี่พิกเซล
bottomSpacing: (default: 0) กำหนดตำแหน่งให้ html element ของเราว่าจะให้อยู่ห่างจากด้านล่างของเพจกี่พิกเซล
className: (default: 'is-sticky') CSS class added to the element's wrapper when "sticked".
wrapperClassName: (default: 'sticky-wrapper') CSS class added to the wrapper.
center: (default: false) Boolean กำหนดให้ html element อยู่ตรงกลาง
getWidthFrom: (default: '') กำหนดให้ html element มีความกว้างเท่ากับ html element ตัวอื่น
widthFromWrapper: (default: true) อันนี้ไม่แน่ลองไปเล่นกันดูน่ะครับ อิๆ
responsiveWidth: (default: false) ใช้กำหนด html element ว่าจะให้ย่อขยายตามหน้าจอหรือเปล่า
zIndex: (default: inherit) ใช้กำหนดตำแหน่ง html element ที่ซ้อนกันว่าจะให้อันไหนอยู่บนอยู่ล่าง คล้ายๆ กับการกำหนด layer ใน photoshop

Methods ของ sticky.js

sticky(options): กำหนดค่า Options เพื่อให้ sticky.js เริ่มต้นทำงาน
sticky('update'): ใช้อัพเดตตำแหน่ง html element ใหม่

Events ของ sticky.js

sticky-start : เป็น event เมื่อ html element ที่กำหนดให้ sticky เริ่มอยู่กับที่ไม่เลื่อนตาม scroll bar ( sticky.js เริ่มทำงาน)
sticky-end : เป็น event เมื่อ html element ที่กำหนดให้ sticky ของเรากลับไปอยู่ตำแหน่งเดิม
sticky-update : event นี้จะเกิดขึ้นเมื่อเรากำหนดตำแหน่งใหม่ให้ html element ที่กำหนดให้ sticky
sticky-bottom-reached : เมื่อ html element ที่กำหนดให้ sticky อยู่ห่างเกินจากค่า bottomSpacing ที่เราตั้งไว้
sticky-bottom-unreached : เมื่อ html element ที่กำหนดให้ sticky อยู่ห่างไม่เกินจากค่า bottomSpacing ที่เราตั้งไว้

ตัวอย่างการดักจับ event ของ sticky.js

<script>
  $('#sticker').on('sticky-start', function() { console.log("Started"); });
  $('#sticker').on('sticky-end', function() { console.log("Ended"); });
  $('#sticker').on('sticky-update', function() { console.log("Update"); });
  $('#sticker').on('sticky-bottom-reached', function() { console.log("Bottom reached"); });
  $('#sticker').on('sticky-bottom-unreached', function() { console.log("Bottom unreached"); });
</script>

สุดท้ายนี้ก็ขอให้ทุกคนสนุกกับการเขียนโปรแกรมน่ะครับบ๊ายบาย 💋