Scrollspy Bootstrap v3.3 funktioniert nicht

Question

Oct 13, 2015, 03:36 PM

Scrollspy Bootstrap v3.3 funktioniert nicht

Verwenden Sie Bootstrap v3.3 und bringen Sie es in der Navigationsleiste an. Affix funktioniert einwandfrei, aber ich kann den Scrollspy überhaupt nicht zum Laufen bringen. Ich habe ein @ erstelgeige hier (Affix von der Geige entfernt), um zu versuchen, herauszufinden, ob etwas anderes in meinem JS oder w / e nicht korrekt war, aber die Geige funktioniert auch nicht.

Below ist Beispiel Geige:

.product-nav.affix {
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    background-color: #555;
}

$('.product-nav').affix({
        offset: {
            top: $('.hero').height()
        }
});

<body data-spy="scroll" data-target="#product-nav">
    <header class="hero">
        <img src="http://placehold.it/400x1000" />
    </header>
    <div class="section gray no-padd">
        <div class="container">
            <!-- component -->
            <div class="product-nav">
                <ul class="list-inline spy-product-nav" id="product-nav">
                    <li><a href="#spy-key-content">Key Content</a>
                    </li>
                    <li><a href="#spy-capabilities">Capabilities</a>
                    </li>
                    <li><a href="#spy-image-carousel">Image Carousel</a>
                    </li>
                    <li><a href="#spy-video">Video</a>
                    </li>
                    <li><a href="#spy-materials">Materials</a>
                    </li>
                    <li><a href="#spy-contact-us">Contact us</a>
                    </li>
                </ul>
            </div>
            <!-- ends component -->
        </div>
    </div>
    <section id="spy-key-content">
        <img src="http://placehold.it/300x500" />
        <h2>Blah Blah blah</h2>
    </section>
</body>

Dinge die ich ausprobiert habe:

Entfernendata-scroll unddata-target vonbody tag und Implementierung stattdessen über JS. (dh -$('body').scrollspy.....)Bewegen von IDs (statt auf demsection, umgezogen nachh2, etc Versucht, das @ zu bewegdata-target Ich würde,#product-nav, an die Elterndiv desul stattdessenVersucht mit Klassen anstelle von IDs (fürdata-target). Versucht, Bindestriche aus den IDs zu entfernen Überprüft, ob scrollspy in der Datei bootstrap.js enthalten ist. Auf Konsolenfehler überprüft

Ich dachte, ich hätte meine Bemühungen erschöpft und vermisse offensichtlich etwas Einfaches, wenn ich es nicht einmal dazu bringen kann, an der Geige zu arbeiten. Ich sehe das @ nic.active class wird einem beliebigen Navigationselement zugewiesen.