Bootstrap 3 Scrollspy Activate Event Not Firing

2019-05-18 09:16发布

站内问答 / 前端开发
556 1 5

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.

1条回答
叼着烟拽天下
2楼-- · 2019-05-18 09:41

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>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)