滚动时未切换活动类答案

【问题标题】：Active class not toggled when scrolling滚动时未切换活动类
【发布时间】：2017-01-29 13:56:05
【问题描述】：

我会将https://startbootstrap.com/template-overviews/scrolling-nav/ 称为网站

我使用的 page-scroll 几乎与他们在网站上使用的完全相同，但我无法将导航侧边栏中的 <li> 标签在向下滚动时自动设置为活动页。相反的效果很好 - 单击链接时它会平滑滚动到正确的位置。

我已经做到了：

确保包含 scrolling-nav.js、jquery.easing.min.js 和滚动导航.css 文件。使链接平滑滚动到另一个页面上的部分，为链接提供 .page-scroll 类并设置将目标链接到页面上的相应 ID。

正文中的侧边栏 HTML

<!-- side navigation -->
<div id="sidebar-wrapper">
    <ul class="sidebar-nav">
        <li class="sidebar-brand">
            <img src="{{ URL::asset('images/pic_for_now.jpg') }}" alt="">
        </li>
        <li>
            <a class="menu-item page-scroll" href="#home">Home</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#about">About</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#education">Education</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#experience">Experience</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#portfolio">Portfolio</a>
        </li>
        <li>
            <a class="menu-item page-scroll" href="#contact">Contact</a>
        </li>
        <li class="menu-footer">
            <a href="{{ URL::to('cv') }}"><h6><i class="lnr lnr-download"></i>Download CV</h6></a>
            <span>
                <a href="#">ENGLISH</a>
                <a href="#">SVENSKA</a>
            </span>
        </li>
    </ul>
</div>
<!-- / side navigation -->

还有滚动导航.js

$(function() {
    //jQuery for page scrolling feature - requires jQuery Easing plugin
    $('a.page-scroll').bind('click', function(event) {
        var $anchor = $(this);
        $('html, body').stop().animate({
            scrollTop: $($anchor.attr('href')).offset().top
        }, 1500, 'easeInOutExpo');
        event.preventDefault();
    });

    // Adding active class to corresponding link on click
    $(".sidebar-nav a").on("click", function(){
       $(".sidebar-nav").find(".active").removeClass("active");
       $(this).parent().addClass("active");
    });
});

我已经单独添加了一个点击功能来添加active 类，但是在网站上，<li> 标签确实会在它滚动到特定位置之后激活。但就我而言，他们永远不会活跃起来。

它接缝是因为网站必须有更多的 js 代码来处理这个问题，但事实并非如此。有人有线索吗？

如果您想了解 {{ }} 语法，我正在使用 Blade 模板 (Laravel/PHP)

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

将data-spy="scroll" 添加到您的<body>。

scrollspy 包含在 Bootstrap 中。

Scrollspy 还需要 <ul> 标签才能拥有 Bootstraps nav 类，例如

<ul class="sidebar-nav nav">

【讨论】：

感谢您的回答。这并没有完全做到这一点，尽管它确实让我得到了正确的答案。我将更新您的答案并将其设置为答案。再次感谢！