Scroll Spion zu mehr als einer Navbar

Ich baue eine Seite Seite mit Bootstrap 4 und a Ich möchte Bootstrap Scroll Spion sowohl auf meine Hauptnavigation und auf eine Seite "navbar" mit Kugeln anwenden. Ich habe Scroll-Spion auf die Hauptnavigation angewendet, aber ich kann nicht herausfinden, wie man es mit der Seitenleiste macht. Auch wenn ich die data-target=".navbar" wieder zu data-target="#bulletNav" ändere, funktioniert es nicht. Hier ist die jsfiddle: https://jsfiddle.net/2beqhxxe/Scroll Spion zu mehr als einer Navbar

Vielen Dank im Voraus

Quelle

2017-10-16 Giannis Savvidis

die Antwort in Scrollspy.js ist, diese Komponente nur Glied in dem "Ziel" handhaben, die .nav-Link oder .list-Gruppe-Elementklasse hat (siehe unten den Schuldcode ;-)). Hier ist die jsfiddle Lösung für mehrere scrollspy wie Sie wollen: https://jsfiddle.net/airpanda50/7ymL4f11/

const Selector = { 
    DATA_SPY  : '[data-spy="scroll"]', 
    ACTIVE   : '.active', 
    NAV_LIST_GROUP : '.nav, .list-group', 
    NAV_LINKS  : '.nav-link', 
    LIST_ITEMS  : '.list-group-item', 
    DROPDOWN  : '.dropdown', 
    DROPDOWN_ITEMS : '.dropdown-item', 
    DROPDOWN_TOGGLE : '.dropdown-toggle' 
}

Quelle

2017-10-17 16:48:26

Dank es funktioniert. Ein anderes Problem, das ich bemerkte, ist, dass es mit Kontakt (der letzte Link) aktiv beginnt und wenn ich scrolle, dann markiert es den tatsächlichen aktiven Link ... –

Ja bemerkte ich auch, aber es ist, weil Sie den Abschnitttags im Javascript eine Höhe gaben document.ready, also wenn scrollspy initiiert wird, sind alle Abschnitte leer und 0 Höhe. Ich habe den Code in der Jsfiddle geändert: - deaktivieren Sie alle JavaScript-Anweisung - fügen Sie eine Regel in CSS: Abschnitte {Höhe: 100vh;} So jetzt die Abschnitt Tags haben eine Höhe, wenn die Seite geladen wird. –

Danke jetzt ist es so wie es sein soll –

Scroll Spion zu mehr als einer Navbar

Antwort

Verwandte Themen