Antworten auf deine Fragen:
Neues Thema erstellen

Antworten zum Thema „zwei Scrollspy in einer Bootstrap Seite“

Jormungand

VonAllemEtwas

Hallo zusammen,

beim Twitter Bootstrap Framework wird die js-Funktion "scrollspy" angeboten. Scrollt man auf einer langen Seite runter, wird in der Navigation automatisch die aktuelle Seite markiert.

Mein Problem:
Ich hab zwei Navigationen. Neben der oberen Hauptnavigation gibt es eine Subnavi, bestehend aus kleinen Dots, die die gleichen Stellen ansteuern können, wie die Hauptnavigation.
Beide Navigationen funzen und bei der Hauptnavi wird - wie es scrollspy verspricht - die aktuelle Position angezeigt.

Wie kann ich es regeln, dass auch in der Subnavi die aktuelle Position gezeigt wird?
Code:
An dieser Stelle sollte ein Codefragment stehen, aber es wird trotz Code-Tags interpretiert.
Schöne Grüße
Jormungand
 

cebito

undefined

AW: zwei Scrollspy in einer Bootstrap Seite

Link? Und warum dein code hier interpretiert wird? Setz es mal in ein zitat...
 

Jormungand

VonAllemEtwas

AW: zwei Scrollspy in einer Bootstrap Seite

Sorry, musste alles erst in einen Editor kopieren, bevor ich es hier einfügen konnte.

Die ursprüngliche Anleitung steht hier:
http://getbootstrap.com/javascript/#scrollspy

Hier der Code als Zitat
Body:
Code:
                             <body data-spy="scroll" data-target=".navbar #dotnavigation" data-offset="80">
Hauptnavigation:
Code:
<div class="container">
            <div class="navbar navbar-fixed-top">
                <div class="navbar-inner">                    
                    <ul class="nav">
                        <li class="active"><a class="scroll" href="#section1">Section1</a></li>
                        <li><a class="scroll" href="#section2">Section2</a></li>
                        <li><a class="scroll" href="#section3">Section3</a></li>
                        <li><a class="scroll" href="#section4">Section4</a></li>
                        <li><a class="scroll" href="#section5">Section5</a></li>
                        <li><a class="scroll" href="#section6">Section6</a></li>
                        <li><a class="scroll" href="#section7">Section7</a></li>
                    </ul>              
                </div>
            </div>
        </div>
Wenn ich

Subnavigation:
Code:
                             <div id="dotnavigation"> 
          <ul class="nav" data-offset-top="190">
              <li class="active"><a class="scroll" href="#section1"></a></li>
              <li><a class="scroll" href="#section2"></a></li>
              <li><a class="scroll" href="#section3"></a></li>
              <li><a class="scroll" href="#section4"></a></li>
              <li><a class="scroll" href="#section5"></a></li>
              <li><a class="scroll" href="#section6"></a></li>
              <li><a class="scroll" href="#section7"></a></li>
          </ul>
      </div>
Solange im body-Tag nur data-target=".navbar" steht, funktioniert zumindest die Hauptnavigation. Füge ich #dotnavigation zusätzlich mit ein, geht scrollspy gar nichts mehr.
 
Zuletzt bearbeitet:

cebito

undefined

AW: zwei Scrollspy in einer Bootstrap Seite

Mit Link meinte ich eigentlich einen Link zu deiner Seite, damit man sehen kann, wie du es umgesetzt hast. Warum dein code hier interpretiert wird ist mir auch immer noch ein Rätsel, lässt sich aber auch sicherlich lösen, wenn man den Link zu deinem Versuch hat und den Originalquelltext sieht.
 

cebito

undefined

AW: zwei Scrollspy in einer Bootstrap Seite

Gib dem div dotnavigation ebenfalls die Klasse navbar
HTML:
<div id="dotnavigation" class="navbar">
und passe dein css an,
Code:
#dotnavigation .nav > .active > a
hat nix was es anders zeigen soll, da sind nur die Zustände :focus und :hover definiert.
 

Jormungand

VonAllemEtwas

AW: zwei Scrollspy in einer Bootstrap Seite

Guter Rat! Das kommt der Sache schon näher.
Aber ich schätze Bootstrap ist damit überfordert.

Die aktive Version des backgrounds (gefüllter Kreis durch background: url(img/dot-aktiv.png) no-repeat;) wird gar nicht erst erkannt. Deshalb habe ich zusätzlicht Text in die <a>-Tags des Submenüs eingefügt.
Jetzt scheint es irgendwie zu gehen, aber nicht richtig. Beim Scrollen flackert immer zwischen dem ersten und dem zur Zeit aktiven Punkt hin und her.
Ich habe die online-Version aktualisiert.
 

Jormungand

VonAllemEtwas

AW: zwei Scrollspy in einer Bootstrap Seite

Ich hab jetzt eine ganze Zeit gebraucht, um es auf die Website zu übertragen, aber deine Lösung war die Rettung.
Der Rest ist reine Anpassungssache.

Tausend Dank für die Hilfe! :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
175.155
Beiträge
2.581.854
Mitglieder
67.221
Neuestes Mitglied
opaklaus
Oben