zwei Scrollspy in einer Bootstrap Seite

Jormungand · 19.11.2013

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

AW: zwei Scrollspy in einer Bootstrap Seite

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

Jormungand · 19.11.2013

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.

cebito · 19.11.2013

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.

Jormungand · 19.11.2013

AW: zwei Scrollspy in einer Bootstrap Seite

Hat jetzt etwas gedauert, aber hier der Link zur Testseite:

cebito · 19.11.2013

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

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.

cebito · 19.11.2013

AW: zwei Scrollspy in einer Bootstrap Seite

Keine Ahnung was Bootstrap da macht, aber vielleicht gehts ja auch ohne... http://jsfiddle.net/8LJjJ/

Jormungand · 20.11.2013

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!