Bootstrap 3 Scrollspy激活事件不会触发 [英] Bootstrap 3 Scrollspy Activate Event Not Firing
问题描述
我试图用Scrollspy创建一个使用Bootstrap 3 RC1的站点。我的网页现在非常简单，基本上就是这样设置的：
< html>
< head>
<！ - 头部东西在这里 - >
< / head>
< body>
< section id =section_1data-spy =scroll>
<！ - 这里的东西 - >
< / section>
< section id =section_2data-spy =scroll>
<！ - 这里的东西 - >
< / section>
< section id =section_3data-spy =scroll>
<！ - 这里的东西 - >
< / section>
< JScripts here ... />
< / body>
< / html>
我通过调用 $（section）来初始化Scrollspy。 （），我已经设置了一个如下的事件处理程序：
$（section ）.on（activate，function（e）{
// do stuff
}）;
我的问题是这个激活事件从不被解雇。有谁知道它为什么不起作用？我注意到所有的教程都使用了一个导航栏来突出显示当前的部分，但我并不想要一个导航栏。
你的scrollspy标记有点偏离。 Scrollspy可能不会触发，这就是为什么你可能没有得到任何结果。根据我的经验，用户数据属性启动滚动更容易。如果您将滚动监听器附加到身体本身以外的任何其他元素，我还没有阅读过它的工作报告。
您应该将它们应用于您的身体标记< body data-spy =scrolldata-target =＃您的导航容器>
另外，您需要确保您的导航结构如下所示：
< div id =您的导航容器>
< ul class =nav>
< li>< a href =＃SECTIONID>列表项目< / a>< / li>
< li>< a href =＃SECTIONID>列表item2< / a>< / li>
< / ul>
< / div>
I'm trying to create a site using Bootstrap 3 RC1 with Scrollspy. My web page is pretty simple right now, and is essentially set up like this:
<html>
<head>
<!-- Head stuff here -->
</head>
<body>
<section id="section_1" data-spy="scroll">
<!-- stuff in here -->
</section>
<section id="section_2" data-spy="scroll">
<!-- stuff in here -->
</section>
<section id="section_3" data-spy="scroll">
<!-- stuff in here -->
</section>
<JScripts here ... />
</body>
</html>
I've initialized Scrollspy by calling $("section").scrollspy() and I've set up an event handler like this:
$("section").on("activate", function(e) {
// do stuff
});
My problem is that this activate event never gets fired. Does anyone know why it's not working? I noticed that all the tutorials use a navbar for highlighting the current section, but I don't really want a navbar.
Your markup for scrollspy is a little off. Scrollspy may not be firing which is why you are probably not getting any results. In my experience it's much easier to user data attributes to initiate scrollspy. And I haven't read one report of it working if you append the scroll listener to any other element than the body itself.
You should apply them to your body tag like this.
<body data-spy="scroll" data-target="#YOUR NAV CONTAINER">
Also, you need to make sure that your navigation structure is like this:
<div id="YOUR NAV CONTAINER">
<ul class="nav">
<li><a href="#SECTIONID">list item</a></li>
<li><a href="#SECTIONID">list item2</a></li>
</ul>
</div>
这篇关于Bootstrap 3 Scrollspy激活事件不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
