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


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

ถ้าใครกำลังหาวิธีทำให้ 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:#00ff00;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>

 


 

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

เทพควิช-lnwquiz