JointsWP4 (SASS): Mengubah Properti di Sticky

TL; DR: Apakah Sticky benar-benar dapat bereaksi terhadap perubahan yang saya berikan melalui JavaScript? Jika ya, bagaimana caranya?

(Proyek ini menggunakan Foundation 6.2 dan WordPress 4.4, tema diinstal menggunakan Node.js / npm dan gulp 4.0. Pertanyaan saya, secara rinci, ditandai dengan cetak tebal.)

Saya ingin membuat navbilah lengket menggunakan Plugin Lengket Foundation, tetapi hanya ketika saya mengklik tombol. Itu berarti bahwa ketika semua DOM selesai, navbilah tidak boleh menempel "dengan sendirinya", tetapi tetap di posisi teratas dalam dokumen. Selain itu , itu harus hilang saat menggulir ke bawah, tetapi tetap saat menggulir ke atas.

The navbar benar dibungkus dalam semua yang diperlukan divs, sehingga navbar mampu menempel. Masalah muncul dengan bagian "tambahan". Ide saya adalah membuat instance Sticky menggunakan PHP terlebih dahulu:

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

Setelah itu, ubah data-btm-anchorke posisi gulir saat ini menggunakan JavaScript yang diaktifkan saat diklik. Ini tidak bekerja sebaik yang saya inginkan. Apa yang saya coba sejauh ini:

1. Saat menggunakan getElementByIDdan kemudian setAttribute, file data-btm-anchordalam PHP berubah sesuai dengan Firebug, tapi itu tidak mempengaruhi navbar sedikit; itu tetap di tempatnya. Apakah saya perlu "memulihkan" Sticky, dan jika ya, bagaimana caranya?
2. The docs menyebutkan:

Menyetel opsi dengan JavaScript melibatkan penerusan objek ke dalam fungsi konstruktor, seperti ini:

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

Apakah itu berarti saya dapat meneruskan parameter baru ke instance plugin yang sudah ada? Setiap kali saya melewati Foundation.Stickyobjek baru dengan tidak lebih dari btmAnchor yang berbeda sebagai parameter array opsi saya ke saya jQuery('#sticky_header'), tidak ada yang terjadi.

3. The docs juga mengusulkan pemrograman menambahkan Sticky untuk saya "sticky_header". Jika itu berhasil, saya bisa mencoba untuk langsung mengubah objek jQuery. Sejauh ini saya berhasil mengikat plugin Sticky ke header saya dengan:

   1. melempar .js dari mana tombol mendapatkan fungsinya assets/js/scripts(dan kemudian berjalan gulp)
   2. menghapus semua tag melekat data dari my <header class="header">, jadi tidak ada plugin melekat yang terdaftar ke tajuk ketika DOM telah selesai memuat

   3. menambahkan plugin secara terprogram:

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

   Header sekarang mendapatkan kelas "lengket" menurut Firebug. Tapi masih tidak berhasil - malah, itu glitches: "Ruang header" agak diciutkan sehingga sedikit menutupi "konten" di divbawah. Tahukah Anda, tajuk tidak menempel. Apakah itu bug?

   Misalkan sekarang ini akan bekerja dengan "brilian", apakah saya secara teoritis dapat mengubah atribut dengan dereferencing var stickatau menggunakan jQuery('#sticky_header')atau jQuery('.header')?

Di atas semua ini, jQuery tidak berfungsi sebagaimana mestinya. Saya memiliki banyak masalah dengan penggunaan $di skrip saya, dan saya tidak dapat, misalnya, menjalankan destroy()metode Sticky karena ini (jika berhasil, saya mungkin telah menghancurkan instance Sticky untuk membuat yang baru dengan yang btmAnchorditetapkan untuk posisi bergulir baru). Saya akan membuka pertanyaan lain untuk ini.

Anda cukup menggunakan atribut sticky css di scss Anda.

Di html atau php tambahkan kelas ke komponen Anda:

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

dan dalam scss atau css:

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

Sekarang letakkan saja jarak dari atas yang Anda butuhkan!

Lebih suka mengontrol sticky dengan menggunakan jquery sepenuhnya.

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

Dengan menggunakan ini, Anda dapat membuat tombol menggulir Anda ke bagian mana pun dari situs web Anda.

Untuk sticky, Anda ingin menambahkan kelas sticky hanya ketika Anda menggulir melewati bagian pertama jadi:

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

});

Menggunakan plugin waypoints, Anda sekarang dapat dengan mudah menambahkan kelas sticky saat Anda menggulir melewati elemen atau bagian. Selektor Jquery dapat memilih berdasarkan id dan kelas menggunakan # dan. masing-masing.

Jika Anda menggunakan wordpress, itu memasukkan JQuery secara otomatis.

Anda memiliki dua cara untuk menggunakan JQuery di Wordpress.

Gunakan JQuery, bukan $

Wordpress menjalankan JQuery dalam mode tanpa konfliknya sehingga Anda harus menggunakan Jquery sebagai gantinya $

Kasus Anda

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

Gunakan $ seperti variabel

Anda juga dapat menggunakan $ tetapi Anda harus menentukan variabel seperti ini:

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