Scrollspy Bootstrap v3.3无法正常工作 [英] Scrollspy Bootstrap v3.3 not working
问题描述
使用带导航条的Bootstrap v3.3. Affix工作正常，但我根本无法使scrollspy正常工作.我在此处创建了小提琴(从小提琴中删除了词缀)，以尝试查看它是否不是我的JS或w/e不正确，但小提琴也不起作用.
Using Bootstrap v3.3 w/ affix on navigation bar. Affix is working fine, but I cannot get the scrollspy to work at all. I created a fiddle here (removed affix from fiddle) to attempt to see if it wasn't something else in my JS or w/e that wasn't correct, but fiddle is not working either.
下面是小提琴示例:
.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>
我尝试过的事情:
- 从
body标记中删除data-scroll和data-target而是通过JS实现. (即-$('body').scrollspy.....) - 正在移动ID(而不是在
section上，已移动到h2等) - 尝试将
data-targetid#product-nav移至父级div代替ul. - 尝试使用类而不是id(对于
data-target). - 试图从ID中删除连字符
- 检查是否在bootstrap.js文件中包含了scrollspy
- 已检查控制台错误
- Removing
data-scrollanddata-targetfrombodytag and implementing through JS instead. (ie -$('body').scrollspy.....) - Moving id's around (instead of on the
section, moved toh2, etc. - Tried moving the
data-targetid,#product-nav, to the parentdivof theulinstead. - Tried using classes instead of ids (for
data-target). - Tried removing hyphens from the ids
- Checked to see if scrollspy was included in the bootstrap.js file
- Checked for console errors
我认为我已经用尽了所有的精力，很明显，如果我什至无法使它工作在小提琴上，我会错过一些简单的东西.我没有看到将.active类分配给任何导航元素.
I figured I've exhausted my efforts, and obviously I'm missing something simple if I cannot even get it to work on the fiddle. I am not seeing the .active class be assigned to any of the navigation elements.
推荐答案
@vanburenx-您的帖子是正确的，但是，我唯一需要做的就是将类.nav添加到相应的ul元素中.
@vanburenx - your post was correct, however, the only thing I needed was to add the class, .nav, to the corresponding ul element.
根据boostrap文档:
Per the boostrap documentation:
要轻松地将滚动滚动行为添加到顶部导航，只需将data-spy ="scroll"添加到要监视的元素(通常是主体)，然后将data-target =.navbar"添加到使用哪个导航. 您将要使用带有.nav组件的scrollspy .
<div class="product-nav" id="product-nav">
<ul class="list-inline hidden-xs nav"> <--- needed that
<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>
这篇关于Scrollspy Bootstrap v3.3无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
