Question

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

我正在使用页面滚动，几乎与网站上的相同，但我无法在导航侧边栏中将<li>标记自动设置为活动时滚动在页面上。相反的工作正常 - 当点击链接时，它可以平滑滚动到正确的位置。

我说完了：

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

正文中的补充工具栏

<!-- 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 -->

还有scrolling-nav.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类，但在网站上，{/ 1}}标记在滚动到该特定位置后确实处于活动状态 。但就我而言，他们永远不会活跃。

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

如果你想知道{{}}语法
，我正在使用Blade模板（Laravel / PHP）

Answer 1

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

scrollspy包含在Bootstrap中。

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

<ul class="sidebar-nav nav">

滚动

1 个答案: