Scrollspy Bootstrap v3.3 не работает
Использование Bootstrap v3.3 с аффиксом на панели навигации. Affix работает нормально, но я не могу заставить работать scrollspy. Я создалвозиться здесь (удалил аффикс из скрипки), чтобы попытаться выяснить, не было ли что-то еще в моем JS или что-то неправильное, но скрипта тоже не работает.
Ниже приведен пример скрипки:
.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>
Вещи, которые я пробовал:
Удалениеdata-scroll а такжеdata-target отbody тег и реализации через JS вместо. (т.е.$('body').scrollspy.....)Перемещение идентификатора вокруг (вместоsection, переехал вh2, так далее.Пытался двигатьdata-target Я бы,#product-navк родителюdiv изul вместо.Пробовал использовать классы вместо идентификаторов (дляdata-target).Попытка удаления дефисов из идентификаторовПроверяется, включен ли scrollspy в файл bootstrap.jsПроверен на ошибки консолиЯ полагал, что исчерпал свои усилия, и, очевидно, мне не хватает чего-то простого, если я даже не могу заставить его работать на скрипке. Я не вижу.active Класс должен быть назначен любому из элементов навигации.