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 nav
Leiste 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 nav
Leiste 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 nav
Stange ist korrekt in alle erforderlichen div
s eingewickelt , so dass die nav
Stange 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-anchor
danach 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:
- Bei Verwendung von
getElementByID
und dann ändert sichsetAttribute
dasdata-btm-anchor
in der PHP-Datei entsprechend Firebug, aber das hat keinen Einfluss auf dienav
Leiste. es bleibt wo es ist. Muss ich Sticky "neu installieren" und wenn ja, wie? - 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.Sticky
Objekt mit nichts anderem als einem anderen btmAnchor als Optionsarray- Parameter an meinen übergeben habe jQuery('#sticky_header')
, ist nichts passiert.
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:
- Wirf die .js, aus denen die Schaltfläche ihre Funktion erhält
assets/js/scripts
(und laufe danngulp
). - 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 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"
div
unten 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 stick
oder Verwendung vonjQuery('#sticky_header')
oder ändernjQuery('.header')
?- Wirf die .js, aus denen die Schaltfläche ihre Funktion erhält
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 btmAnchor
auf eine neue Bildlaufposition einstellen). Ich werde eine andere Frage dafür öffnen.
quelle
wp_enqueue_script( 'jquery' );
immer noch das gleiche Problem wie zuvor. Oder habe ich jQuery falsch in die Warteschlange gestellt? Verfügt JointsWP über eigene jQuery-Bibliotheken?var $ = jQuery
oder Sie müssen die Methode .ready () wie folgt aufrufen:jQuery(document).ready(function($){ //your code here with using $ or jQuery });
Antworten:
Sie können einfach das Sticky-CSS-Attribut in Ihrem SCSS verwenden.
Fügen Sie Ihrer Komponente in HTML oder PHP eine Klasse hinzu:
und in scss oder css:
Stellen Sie jetzt einfach den Abstand von oben ein, den Sie benötigen!
quelle
Ziehen Sie es vor, die Klebrigkeit vollständig mit jquery zu kontrollieren.
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:
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.
quelle
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
Verwenden Sie $ wie eine Variable
Sie können auch $ verwenden, müssen jedoch eine Variable wie die folgende definieren:
quelle