Question

如何在滚动查看上一部分时删除Scrollspy。这是我的示例代码：

<body data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
        <ul class="navbar-nav">
            <li class="nav-item">
                <a class="nav-link" href="#section1">Section 1</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section2">Section 2</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#section3">Section 3</a>
            </li> 
        </ul>
    </nav>

    <div id="section1" class="container-fluid bg-success" 
         style="padding-top:70px;padding-bottom:70px">
    </div>

    <div id="section2" class="container-fluid bg-warning" 
         style="padding-top:70px;padding-bottom:70px"> 
    </div>

    <div id="section3" class="container-fluid bg-secondary" 
        style="padding-top:70px;padding-bottom:70px">
    </div> 

    <section class="remove-fix" style="height:600px;">
    </section>
</body>

如何在使用课程.remove-fix到达上一部分后删除修正菜单并进行正常滚动？

Answer 1

可以使用activate.bs.scrollspy事件跟踪Scrollspy活动。文档使用下面的示例。

$('[data-spy="scroll"]').on('activate.bs.scrollspy', function () {
    // do something…
})

但是，没有记录，当在<body>元素上使用Scrollspy时，activate.bs.scrollspy对象将触发window事件，而不是[data-spy="scroll"] }。因此，在您的情况下，您可以在下面的示例中观察此事件，并在到达最后一个元素后destroy the Scrollspy。

// Basic configuration
var lastElementSelector = '#section3';

// Watching for 'activate.bs.scrollspy' on the `window`
$(window).on('activate.bs.scrollspy', function (event, active) {
    // If the activated element is the last one, do the necessary things
    if (active.relatedTarget === lastElementSelector) {
        // Destroy Scrollspy functionality
        $('[data-spy="scroll"]').scrollspy('dispose');

        // Remove `.fixed-top` from navbar
        $('.navbar').removeClass('fixed-top');
    }
});

请注意，为了在达到.remove-fix时触发事件，您还需要将其包含在导航栏菜单中。因此，您还需要为其设置ID。菜单项可以隐藏。

这是完整的工作示例：

＆＃13;

var lastElementSelector = '#remove-fix';
$(window).on('activate.bs.scrollspy', function (event, active) {
    if (active.relatedTarget === lastElementSelector) {
        $('[data-spy="scroll"]').scrollspy('dispose');
        $('.navbar').removeClass('fixed-top');
    }
});

＆＃13;

<body data-spy="scroll" data-target=".navbar" data-offset="50">
    <nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">  
        <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link" href="#section1">Section 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section2">Section 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#section3">Section 3</a>
            </li>

            <!-- Hidden menu items to track `#remove-fix` -->
            <li class="d-none">
                <a class="nav-link" href="#remove-fix">Remove fix</a>
            </li>
        </ul>
    </nav>

    <div id="section1" class="container-fluid bg-success" 
         style="padding-top:70px;padding-bottom:70px">
    </div>
    <div id="section2" class="container-fluid bg-warning" 
         style="padding-top:70px;padding-bottom:70px"> 
    </div>
    <div id="section3" class="container-fluid bg-secondary" 
        style="padding-top:70px;padding-bottom:70px">
    </div>

    <section id="remove-fix" style="height:700px;">
    </section>


<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</body>

＆＃13;

当最后一部分滚动查看时，Bootstrap Scrollspy删除固定菜单

1 个答案: