JointsWP4 (SASS): Thay đổi thuộc tính trong Sticky

TL; DR: Sticky có thực sự có thể phản ứng với những thay đổi mà tôi đưa ra thông qua JavaScript không? Nếu vậy, làm thế nào?

(Dự án đang sử dụng Foundation 6.2 và WordPress 4.4, chủ đề được cài đặt bằng Node.js / npm và gulp 4.0. Chi tiết các câu hỏi của tôi được đánh dấu bằng chữ in đậm.)

Tôi muốn làm cho navthanh dính bằng cách sử dụng Plugin Sticky của Foundation, nhưng chỉ khi tôi nhấp vào một nút. Điều đó có nghĩa là khi DOM đã hoàn tất, navthanh sẽ không tự "dính" mà phải ở vị trí trên cùng của nó trong tài liệu. Ngoài ra, nó sẽ biến mất khi cuộn xuống, nhưng vẫn dính khi cuộn lên.

Các navthanh được bọc một cách chính xác trong tất cả các yêu cầu div, vì vậy các navthanh có khả năng dính. Các vấn đề nảy sinh với phần "bổ sung". Ý tưởng của tôi là khởi tạo Sticky bằng PHP trước:

<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>

Sau đó, thay đổi data-btm-anchorvị trí cuộn hiện tại bằng cách sử dụng JavaScript được kích hoạt khi nhấp chuột. Điều này không hoạt động tốt như tôi muốn. Những gì tôi đã thử cho đến nay:

1. Khi sử dụng getElementByIDvà sau đó setAttribute, data-btm-anchortệp trong PHP không thay đổi theo Firebug, nhưng điều đó không ảnh hưởng đến navthanh một chút; nó vẫn ở vị trí của nó. Tôi có cần "phục hồi" Sticky không, và nếu có, thì làm thế nào?
2. Tài liệu đề cập đến:

Đặt tùy chọn với JavaScript liên quan đến việc truyền một đối tượng vào hàm khởi tạo, như sau:

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

Điều đó có nghĩa là tôi có thể chuyển các tham số mới cho một phiên bản plugin đã tồn tại? Bất cứ khi nào tôi chuyển một Foundation.Stickyđối tượng mới không có gì khác ngoài một btmAnchor khác làm tham số mảng tùy chọn của tôi cho của tôi jQuery('#sticky_header'), không có gì xảy ra.

3. Tài liệu cũng đề xuất thêm Sticky theo chương trình vào "stick_header" của tôi. Nếu điều đó hiệu quả, tôi có thể cố gắng thay đổi trực tiếp đối tượng jQuery. Cho đến nay, tôi đã có thể liên kết thành công plugin Sticky với tiêu đề của mình bằng cách:

   1. ném .js mà từ đó nút có chức năng của nó assets/js/scripts(và sau đó chạy gulp)
   2. xóa tất cả các thẻ cố định dữ liệu khỏi của tôi <header class="header">, vì vậy không có plugin cố định nào được đăng ký vào tiêu đề khi DOM tải xong

   3. thêm plugin theo chương trình:

      function button_fire(){
        var options = {
          topAnchor:"1",
          btmAnchor:"footer:top",
          marginTop:"1"
        };
        var stick = new Foundation.Sticky(jQuery('.header'), options);
      }

   Tiêu đề bây giờ đạt được lớp "dính" theo Firebug. Nhưng nó vẫn không hoạt động - đúng hơn là nó bị trục trặc: "header space" bị thu gọn nên nó hơi che đi "content" divbên dưới. Bạn biết gì, tiêu đề không dính. Đó có phải là một lỗi?

   Giả sử bây giờ nó sẽ hoạt động "xuất sắc", về mặt lý thuyết tôi có thể thay đổi các thuộc tính bằng cách tham khảo var stickhoặc sử dụng jQuery('#sticky_header')hoặc jQuery('.header')không?

Trên hết, jQuery không hoạt động như bình thường. Tôi đã gặp rất nhiều vấn đề với việc sử dụng $trong các tập lệnh của mình và chẳng hạn như tôi không thể chạy destroy()phương thức Sticky vì điều này (nếu nó hoạt động, tôi có thể đã phá hủy một bản sao của Sticky để tạo một bản mới với các btmAnchorthiết lập để một vị trí di chuyển mới). Tôi sẽ mở một câu hỏi khác cho điều này.

Bạn chỉ có thể sử dụng thuộc tính css cố định trong scss của mình.

Trong html hoặc php, hãy thêm lớp vào thành phần của bạn:

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

và trong scss hoặc css:

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

Bây giờ chỉ cần đặt khoảng cách từ đầu bạn cần!

Thích kiểm soát độ dính bằng cách sử dụng hoàn toàn jquery.

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

Sử dụng điều này, bạn có thể tạo một nút cuộn bạn đến bất kỳ phần nào trên trang web của bạn.

Đối với phần dính, bạn chỉ muốn thêm lớp dính khi cuộn qua phần đầu tiên để:

$(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'
    });

});

Sử dụng plugin điểm tham chiếu, giờ đây bạn có thể dễ dàng thêm lớp dính khi cuộn qua một phần tử hoặc phần. Bộ chọn truy vấn có thể chọn theo id và lớp bằng cách sử dụng # và. tương ứng.

Nếu bạn sử dụng wordpress, nó sẽ tự động xếp hàng JQuery.

Bạn có hai cách để sử dụng JQuery trong Wordpress.

Sử dụng JQuery thay thế $

Wordpress chạy JQuery ở chế độ không xung đột, vì vậy bạn phải sử dụng Jquery thay thế $

Trường hợp của bạn

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

Sử dụng $ like một biến

Bạn cũng có thể sử dụng $ nhưng bạn phải xác định một biến như sau:

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