Scrollspy Bootstrap v3.3 no funciona
Usando Bootstrap v3.3 w / affix en la barra de navegación. Affix funciona bien, pero no puedo hacer que el scrollspy funcione en absoluto. Creé unviolín aquí (quité el afijo del violín) para intentar ver si no era algo más en mi JS o w / e que no era correcto, pero el violín tampoco funciona.
A continuación se muestra un violín de ejemplo:
.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>
Cosas que he probado:
Quitandodata-scroll ydata-target debody etiquetar e implementar a través de JS en su lugar. (es decir, -$('body').scrollspy.....)Moviendo la identificación (en lugar desection, trasladado ah2etc.Intenté mover eldata-target carné de identidad,#product-naval padrediv delul en lugar.Intenté usar clases en lugar de identificadores (paradata-target)Intenté eliminar guiones de los IDSe verificó si scrollspy estaba incluido en el archivo bootstrap.jsComprobado por errores de consolaPensé que había agotado mis esfuerzos, y obviamente me estoy perdiendo algo simple si ni siquiera puedo hacer que funcione en el violín. No estoy viendo el.active clase se asignará a cualquiera de los elementos de navegación.