Ich versuche, Bootstraps scrollspy zuverlässig auf einer responsiven Website zu betreiben, auf der sich die Höhe der oberen Navigationsleiste entsprechend der Breite des Mediums / Browsers ändert. Anstatt also den Offset für das data-offset -Attribut fest zu codieren, setze ich ihn dynamisch durch Javascript-Initialisierung wie folgt ein:
Für breite Layouts (d. h. Bootstrap -lg) funktioniert es gut, aber für schmalere Layouts scheint es einen "akkumulierenden" Offset zu geben. Mit anderen Worten, es funktioniert gut für den ersten Abschnitt, nimmt dann aber zunehmende Pixel, um die folgenden zu aktivieren (z. B. 90px für den nächsten, 110px für den dritten usw.).
Ich habe versucht, das scrollspy-Objekt direkt zu manipulieren, wie in dieser Antwort erwähnt: Wie stelle ich den Offset für ScrollSpy ein? in Bootstrap? , aber ohne Erfolg.
Kann jemand eine kanonische Methode zur Implementierung von scrollspy in einer responsiven Website empfehlen, bei der der Offset je nach Medienbreite variiert?
Zusätzliche Informationen:
Ich habe gerade das scrollspy-Objekt in beiden Szenarien analysiert, und es stellt sich heraus, dass die Liste der Offsets unterschiedlich ist, wenn sie nur über data- -Attribute oder über JS initialisiert wird. Es sieht so aus, als wenn ich es über JS initialisiere, wird das Offsets-Array aufgefüllt, bevor einige BS-reaktive Anpassungen stattfinden und daher die Höhen unterschiedlich sind. Wie kann ich die Initialisierung von scrollspy auslösen nachdem alle reaktiven Sachen ausgeführt wurden? Gibt es einen Hook / Callback, nachdem BS das Layout angepasst hat? Ist JS überhaupt involviert oder wird das reaktionsschnelle Zeug von CSS gehandhabt?
Leider ruft jQuery die Attribute data-* nur einmal auf, wenn die Funktion $().data(...) zum ersten Mal aufgerufen wird. Und scrollspy liest die Optionen nur einmal beim Initialisieren. Die Funktion refresh von scrollspy lädt keine der Optionen neu. Der Aufruf von $(..).scrollspy(...) erneut für dasselbe Element ignoriert alle neuen Datenoptionen (verwendet die zuvor initialisierten Werte).
Allerdings speichert scrollspy die Optionswerte in den Elementdaten unter dem Schlüssel 'bs.scrollspy' . Sie können also das Feld options.offset in diesem Datenschlüssel ändern.
Um eine sich dynamisch ändernde Höhe der Navigationsleiste zu berücksichtigen und den scrollspy-Versatzwert zu ändern, können Sie das folgende Beispiel für eine feste Navigationsleiste mit variabler Höhe verwenden.
Das Folgende macht ein paar Dinge.
window.load -Ereignis ausgelöst wurde) und beginnt mit einem Offset der aktuellen Höhe der Navbar (passt auch den padding-top -Wert des Körpers so an, dass er der Höhe der Navigationsleiste entspricht). padding-top des Körpers wird angepasst und der scrollspy offset wird angepasst, um zu passen. Dann wird ein refresh ausgeführt, um die Ankeroffsets neu zu berechnen. Und das ist es. Nicht schön, aber es funktioniert definitiv. Mein HTML-Code oben muss möglicherweise etwas optimiert werden.
Wenn Sie Elemente dynamisch zu Ihrer Navigationsleiste hinzufügen, müssen Sie nach dem Einfügen fixSpy() aufrufen. Oder Sie könnten fixSpy() über einen setInterval(...) timer aufrufen, um die ganze Zeit zu laufen.
Scrollspy legt nach der Initialisierung eine Liste von Zielen / Versatz fest. Wenn Sie die Größe Ihres Bildschirms ändern, wird scrollspy nicht erneut initialisiert. Sie haben Ihre Seite neu geladen, um die Offsets neu zu berechnen.
Der von Ihnen genannte "akkumulierende" Offset wird durch die gleiche Liste von Offsets mit unterschiedlichen Inhaltshöhen verursacht.
Um dieses Reload auch mit $(window).resize() auszulösen, beachten Sie, dass ein Browser dies zweimal auslöst, siehe Ссылка für eine Lösung :
Beachten Sie, dass die Dokumentation zu Ссылка Ihnen etwas Ähnliches sagt:
"Bei Verwendung von scrollspy in Verbindung mit dem Hinzufügen oder Entfernen von Elemente aus dem DOM müssen Sie die Aktualisierungsmethode "
" aufrufen
Mit dem oben genannten erhalten Sie etwas wie:
%Vor%HINWEIS : Das scollspy-Plugin verwendet die jQuery-Funktion scrollTop () für Berechnungen. Lesen Sie auch dies: Ссылка .
Tags und Links responsive-design twitter-bootstrap twitter-bootstrap-3 scrollspy