JointsWP4 (SASS): Ändern der Eigenschaften in Sticky

TL; DR: Kann Sticky tatsächlich auf Änderungen reagieren, die ich über JavaScript gebe? Wenn das so ist, wie?

(Das Projekt verwendet Foundation 6.2 und WordPress 4.4, ein mit Node.js / npm und gulp 4.0 installiertes Thema. Meine Fragen sind im Detail fett gedruckt.)

Ich möchte die navLeiste mit dem Sticky Plugin von Foundation klebrig machen , aber nur, wenn ich auf eine Schaltfläche klicke. Das heißt, wenn das DOM fertig ist, sollte die navLeiste nicht "von selbst" kleben, sondern in ihrer obersten Position im Dokument bleiben. Außerdem sollte es beim Scrollen nach unten verschwinden, aber beim Scrollen nach oben bleiben.

Die navStange ist korrekt in alle erforderlichen divs eingewickelt , so dass die navStange kleben kann. Die Probleme treten beim "zusätzlichen" Teil auf. Meine Idee war, Sticky zuerst mit PHP zu instanziieren:

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

Ändern Sie data-btm-anchordanach die aktuelle Bildlaufposition mit JavaScript, das beim Klicken ausgelöst wird. Das hat nicht so gut funktioniert, wie ich es gerne hätte. Was ich bisher versucht habe:

1. Bei Verwendung von getElementByIDund dann ändert sich setAttributedas data-btm-anchorin der PHP-Datei entsprechend Firebug, aber das hat keinen Einfluss auf die navLeiste. es bleibt wo es ist. Muss ich Sticky "neu installieren" und wenn ja, wie?
2. Die Dokumente erwähnen:

Das Festlegen von Optionen mit JavaScript umfasst das Übergeben eines Objekts an die Konstruktorfunktion wie folgt:

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

Bedeutet das, dass ich neue Parameter an eine bereits vorhandene Plugin-Instanz übergeben kann? Immer wenn ich ein neues Foundation.StickyObjekt mit nichts anderem als einem anderen btmAnchor als Optionsarray- Parameter an meinen übergeben habe jQuery('#sticky_header'), ist nichts passiert.

3. In den Dokumenten wird auch vorgeschlagen, Sticky programmgesteuert zu meinem "sticky_header" hinzuzufügen. Wenn das funktioniert, könnte ich versuchen, das jQuery-Objekt direkt zu ändern. Bisher konnte ich das Sticky-Plugin erfolgreich an meinen Header binden, indem ich:

   1. Wirf die .js, aus denen die Schaltfläche ihre Funktion erhält assets/js/scripts(und laufe dann gulp).
   2. Löschen aller Daten-Sticky-Tags aus meinem <header class="header">, sodass kein Sticky-Plugin im Header registriert ist, wenn das DOM vollständig geladen wurde

   3. programmgesteuertes Hinzufügen des Plugins:

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

   Der Header erhält laut Firebug nun die "klebrige" Klasse. Aber es funktioniert immer noch nicht - vielmehr gibt es Pannen: Der "Header-Bereich" ist etwas reduziert, sodass er den "Inhalt" divunten leicht abdeckt . Was weißt du, der Header bleibt nicht hängen. Ist das ein Fehler?

   Angenommen, es würde jetzt "brillant" funktionieren. Kann ich theoretisch Attribute durch Dereferenzierung var stickoder Verwendung von jQuery('#sticky_header')oder ändern jQuery('.header')?

Vor allem funktioniert jQuery nicht so, wie es sollte. Ich hatte viele Probleme mit der Verwendung $in meinen Skripten und kann beispielsweise die destroy()Methode von Sticky nicht ausführen (wenn dies funktioniert hat, habe ich möglicherweise eine Instanz von Sticky zerstört, um eine neue zu erstellen das btmAnchorauf eine neue Bildlaufposition einstellen). Ich werde eine andere Frage dafür öffnen.

Sie können einfach das Sticky-CSS-Attribut in Ihrem SCSS verwenden.

Fügen Sie Ihrer Komponente in HTML oder PHP eine Klasse hinzu:

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

und in scss oder css:

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

Stellen Sie jetzt einfach den Abstand von oben ein, den Sie benötigen!

Ziehen Sie es vor, die Klebrigkeit vollständig mit jquery zu kontrollieren.

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

Mit dieser Option können Sie mit einer Schaltfläche zu einem beliebigen Teil Ihrer Website scrollen.

Für das Sticky möchten Sie die Sticky-Klasse nur hinzufügen, wenn Sie über den ersten Abschnitt scrollen, also:

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

});

Mit dem Wegpunkt-Plugin können Sie jetzt einfach die Sticky-Klasse hinzufügen, wenn Sie an einem Element oder Abschnitt vorbeirollen. Jquery Selector kann mit # und nach ID und Klasse auswählen. beziehungsweise.

Wenn Sie WordPress verwenden, wird JQuery automatisch in die Warteschlange gestellt.

Sie haben zwei Möglichkeiten, JQuery in Wordpress zu verwenden.

Verwenden Sie stattdessen JQuery $

Wordpress führt JQuery in seinem No-Conflict-Modus aus, sodass Sie stattdessen Jquery $ verwenden müssen

Dein Fall

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

Verwenden Sie $ wie eine Variable

Sie können auch $ verwenden, müssen jedoch eine Variable wie die folgende definieren:

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