JointsWP4 (SASS): การเปลี่ยนคุณสมบัติใน Sticky

Question 1

TL; DR: Sticky สามารถตอบสนองต่อการเปลี่ยนแปลงที่ฉันให้ผ่าน JavaScript ได้หรือไม่? ถ้าเป็นอย่างไร

(โครงการนี้ใช้ Foundation 6.2 และ WordPress 4.4 ธีมที่ติดตั้งโดยใช้ Node.js / npm และ gulp 4.0 โดยละเอียดคำถามของฉันถูกทำเครื่องหมายเป็นตัวหนา)

ฉันต้องการทำให้navแท่งเหนียวโดยใช้ Sticky Plugin ของ Foundation แต่เมื่อฉันคลิกที่ปุ่มเท่านั้น นั่นหมายความว่าเมื่อ DOM ทั้งหมดเสร็จสิ้นnavแถบไม่ควรติด "ด้วยตัวเอง" แต่จะอยู่ในตำแหน่งบนสุดในเอกสาร นอกจากนี้ควรจะหายไปเมื่อเลื่อนลง แต่ติดขณะเลื่อนขึ้น

navบาร์ถูกห่ออย่างถูกต้องในทุกที่จำเป็นdivs ดังนั้นnavบาร์สามารถที่จะติด ปัญหาเกิดขึ้นกับส่วน "เพิ่มเติม" ความคิดของฉันคือการสร้างอินสแตนซ์ Sticky โดยใช้ PHP ก่อน:

<div data-sticky-container>
  <header class="header" role="banner" id="sticky_header" data-sticky data-top-anchor="1" 
    data-btm-anchor="content:top" data-options="marginTop:0;" style="width:100%"
>
    <?php get_template_part('parts/nav', 'offcanvas-topbar'); ?>
  </header>
</div>

หลังจากนั้นให้เปลี่ยนdata-btm-anchorไปที่ตำแหน่งเลื่อนปัจจุบันโดยใช้ JavaScript ที่เริ่มทำงานเมื่อคลิก สิ่งนี้ไม่ได้ผลดีเท่าที่ฉันต้องการ สิ่งที่ฉันได้ลองแล้ว:

เมื่อใช้getElementByIDแล้วsetAttributeที่data-btm-anchorอยู่ในไฟล์ PHP ไม่เปลี่ยนแปลงตาม Firebug แต่ที่ไม่ได้มีอิทธิพลต่อnavบาร์บิต; มันอยู่ในที่ที่เป็นอยู่ ฉันต้อง "คืนสถานะ" Sticky หรือไม่และถ้าเป็นเช่นนั้นต้องทำอย่างไร
เอกสารกล่าวถึง:

การตั้งค่าตัวเลือกด้วย JavaScript เกี่ยวข้องกับการส่งวัตถุไปยังฟังก์ชันตัวสร้างดังนี้:
var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);

หมายความว่าฉันสามารถส่งผ่านพารามิเตอร์ใหม่ไปยังอินสแตนซ์ปลั๊กอินที่มีอยู่แล้วได้หรือไม่ เมื่อใดก็ตามที่ฉันส่งผ่านFoundation.Stickyวัตถุใหม่โดยไม่มีอะไรมากไปกว่าbtmAnchor ที่แตกต่างกันเป็นพารามิเตอร์อาร์เรย์ตัวเลือกของฉันjQuery('#sticky_header')ไม่มีอะไรเกิดขึ้น

เอกสารยังเสนอโปรแกรมเพิ่มเหนียว "sticky_header ของฉัน" หากได้ผลฉันสามารถลองแก้ไขวัตถุ jQuery ได้โดยตรง จนถึงตอนนี้ฉันสามารถผูกปลั๊กอิน Sticky กับส่วนหัวของฉันได้สำเร็จโดย:
1. โยน. js ซึ่งปุ่มจะรับฟังก์ชั่นเข้าไปassets/js/scripts(แล้วเรียกใช้gulp)
2. การลบแท็กเหนียวข้อมูลทั้งหมดออกจาก my <header class="header">ดังนั้นจึงไม่มีปลั๊กอินติดหนึบที่ลงทะเบียนกับส่วนหัวเมื่อ DOM โหลดเสร็จแล้ว
3. การเพิ่มปลั๊กอินโดยทางโปรแกรม:
```
function button_fire(){
  var options = {
    topAnchor:"1",
    btmAnchor:"footer:top",
    marginTop:"1"
  };
  var stick = new Foundation.Sticky(jQuery('.header'), options);
}
```
ตอนนี้ส่วนหัวได้รับคลาส "เหนียว" ตาม Firebug แต่ก็ยังใช้งานไม่ได้ - แต่มีข้อบกพร่อง: "พื้นที่ส่วนหัว" ค่อนข้างยุบดังนั้นจึงครอบคลุม "เนื้อหา" divด้านล่างเล็กน้อย อะไรไม่รู้ส่วนหัวไม่ติด เป็นบั๊กหรือเปล่า

สมมติว่าตอนนี้ใช้งานได้ "ยอดเยี่ยม" ในทางทฤษฎีฉันสามารถเปลี่ยนแอตทริบิวต์โดยการยกเลิกการอ้างอิงvar stickหรือใช้jQuery('#sticky_header')หรือหรือjQuery('.header')ไม่

เหนือสิ่งอื่นใด jQuery ไม่ทำงานเท่าที่ควร ฉันมีปัญหามากมายกับการใช้$ในสคริปต์ของฉันและตัวอย่างเช่นฉันไม่สามารถเรียกใช้destroy()เมธอด Sticky ได้เนื่องจากสิ่งนี้ (ถ้ามันใช้งานได้ฉันอาจทำลายอินสแตนซ์ของ Sticky เพื่อสร้างใหม่ด้วยbtmAnchorชุดไปเลื่อนตำแหน่งใหม่) ฉันจะเปิดคำถามอื่นสำหรับเรื่องนี้

Question 2

คุณสามารถใช้คุณลักษณะ sticky css ใน scss ของคุณ

ใน html หรือ php เพิ่มคลาสให้กับคอมโพเนนต์ของคุณ:

<div data-sticky-container class="sticky-container">

และใน scss หรือ css:

.sticky-container {
    position: sticky;
    top: 0;
    z-index: 10; 
}

ตอนนี้เพียงแค่วางระยะห่างจากจุดสูงสุดที่คุณต้องการ!

Question 3

ชอบควบคุมเหนียวโดยใช้ jquery อย่างสมบูรณ์

$(document).ready(function(){
    $('<Your button>').click(function () {
        $('html, body').animate({scrollTop: $('<where you want to go>').offset().top}, 1000);
    });

เมื่อใช้สิ่งนี้คุณสามารถทำให้ปุ่มเลื่อนคุณไปที่ส่วนใดก็ได้ของเว็บไซต์ของคุณ

สำหรับ Sticky คุณต้องการเพิ่มคลาส Sticky เมื่อคุณเลื่อนผ่านส่วนแรกเท่านั้น:

$(document).ready(function(){
    $(<Section name after which you want sticky to appear>).waypoint(function(direction){
        if (direction == "down"){
           $('nav').addClass('sticky');
           }else{
               $('nav').removeClass('sticky');
           }
    }, {
        offset: '60px'
    });

});

เมื่อใช้ปลั๊กอิน waypoints คุณสามารถเพิ่มคลาสที่ติดหนึบได้อย่างง่ายดายเมื่อคุณเลื่อนผ่านองค์ประกอบหรือส่วน ตัวเลือก jquery สามารถเลือกตาม id และ class โดยใช้ # และ. ตามลำดับ

Question 4

หากคุณใช้ wordpress ระบบจะสร้าง JQuery โดยอัตโนมัติ

คุณมีสองวิธีในการใช้ JQuery ใน Wordpress

ใช้ JQuery แทน $

Wordpress เรียกใช้ JQuery ในโหมดไม่มีข้อขัดแย้งดังนั้นคุณต้องใช้ Jquery แทน $

กรณีของคุณ

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion(JQuery('#some-accordion'), options);

ใช้ $ เหมือนตัวแปร

คุณยังสามารถใช้ $ ได้ แต่คุณต้องกำหนดตัวแปรดังนี้:

var options = {
   multiExpand: true,
   allowAllClosed: false
};
var accordion = new Foundation.Accordion($('#some-accordion'), options);