Bootstrap Scroll Spy hebt falsche ID

Ich brauche Hilfe mit meinem Bootstrap scrollspy Einstellung. Es markiert die falsche Div-ID (immer die letzte). Kann mir bitte jemand helfen?Bootstrap Scroll Spy hebt falsche ID

Code:

Inhalt:

<body style="heigt: 100%" data-spy="scroll" data-target="#side-menu"> 
    <div class="container-fluid"> 
     <div class="row"> 
     <nav id="side-menu" class="col-xs-3 bs-docs-sidebar" data-gumshoe-header> 
      <ul class="nav nav-stacked fixed" data-gumshoe> 
       <li> 
        <a href="#GroupA">Group A</a> 
       </li> 
       <li> 
        <a href="#GroupB">Group B</a> 
       </li> 
       <li> 
        <a href="#GroupC">Group C</a> 
       </li> 
      </ul> 
     </nav> 
     <div class="col-md-9"> 
      <div id="GroupA"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <br><br><br><br><br><br><br><br><br> 
    <div id="GroupB"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
    <br><br><br><br><br><br><br><br><br> 
    <div id="GroupC"> 
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
    </div> 
     </div> 
     </div> 
    </div> 
</body>

// Edit: Bild von Seite

Ich bin mit Bootstrap 3.3.7 und 2.2.4 JQuery.

Grüße

Quelle

2017-07-04 Lars

Sehen Sie sich meine bearbeitete Antwort an. Das Problem ist nicht genug Platz zum vertikalen Scrollen. Mit mehr Inhalt in Ihren Divs funktioniert der Code ordnungsgemäß. Denken Sie auch daran, CSS 'margin' auf Ihren divs zu verwenden, anstatt Millionen von' br' zu verwenden :) –

Ich bemerkte, dass Sie 'style =" height: 100% "anstelle von' style = "height: 100%" 'in Ihrem "Körper" -Element. –

@BartoszT Fügen Sie Ihren letzten Kommentar in Ihre Antwort und ich werde Ihre Antwort akzeptieren. Das war's! Vielen Dank! – Lars

Scrolled Element sollte position: relative Stil sein.

Ref: http://getbootstrap.com/javascript/#requires-relative-positioning

bearbeiten

Ihre divs Höhe sind zu klein. Scroll-Bereich ist zu kurz für Scroll-Spion.

Arbeits Geige: https://jsfiddle.net/o93q4maf/

EDIT2

Als @Lars mentioned das Problem war ein Tippfehler: style="heigt: 100%" statt style="height: 100%" in Körperelement.

Quelle

2017-07-04 07:09:53

Ich ersetzte 'style =" Höhe: 100% 'mit' style = "position: relative;" 'at' body', aber es funktioniert nicht – Lars

Sind Sie sicher, dass Sie scrollspy.js Plugin enthalten haben? Ich habe keine Ahnung. Ihr Markup scheint in Ordnung zu sein. –

Yeah die scrollspy.js ist in der Datei bootstrap.min.js enthalten, oder nicht? – Lars

Bootstrap Scroll Spy hebt falsche ID

Antwort

Verwandte Themen