EklemlerWP4 (SASS): Yapışkan Olarak Özellikleri Değiştirme

TL; DR: Sticky, JavaScript aracılığıyla verdiğim değişikliklere gerçekten tepki verebilir mi? Öyleyse nasıl?

(Proje, Node.js / npm ve gulp 4.0 kullanılarak kurulan tema Foundation 6.2 ve WordPress 4.4 kullanıyor. Sorularım ayrıntılı olarak kalın harflerle işaretlenmiştir.)

navÇubuğu Foundation'ın Yapışkan Eklentisini kullanarak yapışkan hale getirmek istiyorum , ancak yalnızca bir düğmeye tıkladığımda. Bu, DOM'un tamamı bittiğinde, navçubuğun "kendi kendine" kalmaması, ancak belgede en üst konumunda kalması gerektiği anlamına gelir . Ek olarak, aşağı kaydırırken kaybolmalı, ancak yukarı kaydırırken takılı kalmalıdır.

navÇubuğu doğru gerekli tüm sarılır divböylece, s navçubuğu sopa edebiliyor. Sorunlar "ek olarak" kısımda ortaya çıkar. Benim fikrim, ilk önce PHP kullanarak Sticky'i başlatmaktı:

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

Bundan sonra data-btm-anchor, tıklamayla tetiklenen JavaScript'i kullanarak mevcut kaydırma konumuna değiştirin . Bu istediğim kadar işe yaramadı. Şimdiye kadar denediklerim:

1. Kullanılırken getElementByIDve sonra setAttribute, data-btm-anchorPHP dosyasındaki dosya Firebug'a göre değişir, ancak bu navçubuğu biraz etkilemez ; olduğu yerde kalır. Yapışkan'ı "yeniden etkinleştirmem" gerekiyor mu ve öyleyse, nasıl?
2. Dokümanlar söz:

JavaScript ile seçenekleri ayarlamak, bir nesneyi yapıcı işlevine şu şekilde iletmeyi içerir:

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

Bu, mevcut bir eklenti örneğine yeni parametreler aktarabileceğim anlamına mı geliyor ? Seçenekler dizisi parametrem olarak Foundation.Stickyfarklı bir btmAnchor'dan başka bir şey içermeyen yeni bir nesneyi my'a ilettiğimdejQuery('#sticky_header') hiçbir şey olmadı.

3. Docs aynı zamanda benim "sticky_header" için Sabit ekleyerek programlı öneriyoruz. Bu işe yaradıysa, jQuery nesnesini doğrudan değiştirmeyi deneyebilirim. Şimdiye kadar, Sticky eklentisini başlığıma başarıyla bağlayabildim:

   1. düğmenin işlevini aldığı .j'leri atma assets/js/scripts(ve sonra çalıştırma gulp)
   2. tüm veri yapışkan etiketleri my'den siliyorum <header class="header">, bu nedenle DOM yüklemeyi bitirdiğinde başlığa kaydedilmiş yapışkan bir eklenti yok

   3. eklentiyi programlı olarak eklemek:

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

   Başlık şimdi Firebug'a göre "yapışkan" sınıfını kazanır. Ama yine de çalışmıyor - daha çok aksıyor: "Başlık alanı" bir şekilde daraltılmış, bu nedenle divaşağıdaki "içeriği" biraz kaplıyor . Ne biliyorsun, başlık yapışmaz. Bu bir hata mı?

   Şimdi "zekice" çalışacağını varsayalım, teorik olarak öznitelikleri referans alarak var stickveya kullanarak jQuery('#sticky_header')veya kullanarak değiştirebilir jQuery('.header')miyim?

Tüm bunların üzerinde jQuery olması gerektiği gibi çalışmıyor. $Komut dosyalarımda kullanmakla ilgili birçok sorun yaşadım ve örneğin, destroy()bu nedenle Sticky yöntemini çalıştıramıyorum (işe yaradıysa, yeni bir tane oluşturmak için Sticky örneğini yok etmiş olabilirim. btmAnchoryeni bir kaydırma konumuna ayarlanır). Bunun için başka bir soru açacağım.

Scss'nizde yapışkan css özelliğini kullanabilirsiniz.

Html veya php'de bileşeninize sınıf ekleyin:

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

ve scss veya css'de:

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

Şimdi sadece ihtiyacınız olan mesafeyi ayarlayın!

Tamamen jquery kullanarak yapışkanı kontrol etmeyi tercih edin.

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

Bunu kullanarak bir düğmenin sizi web sitenizin herhangi bir bölümüne kaydırmasını sağlayabilirsiniz.

Yapışkan için, yapışkan sınıfı yalnızca ilk bölümü geçtiğinizde eklemek istersiniz, böylece:

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

});

Yol noktaları eklentisini kullanarak, artık bir öğeyi veya bölümü kaydırdığınızda yapışkan sınıfı kolayca ekleyebilirsiniz. Jquery seçici, # ve kullanarak id ve sınıfa göre seçim yapabilir. sırasıyla.

Wordpress kullanırsanız, JQuery'yi otomatik olarak kuyruğa alır.

Wordpress'te JQuery'yi kullanmanın iki yolu vardır.

Bunun yerine JQuery kullanın $

Wordpress JQuery'yi çakışmasız modunda çalıştırdığından, bunun yerine Jquery kullanmanız gerekir $

Senin durumun

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

$ Değişken gibi kullanın

$ Da kullanabilirsiniz, ancak bunun gibi bir değişken tanımlamanız gerekir:

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