Question

我有一个相对标准的页面布局。

我有多个

<section id="unique-id">Content</section>

其中包含页面内容。由于固定的导航栏（高度：100px），我在页面顶部也有垫片。

当用户滚动到页面底部时，当它们到达每个部分时，我会触发一个Waypoints事件，其偏移量为100.这样可以确保我不会在菜单下隐藏内容。

问题是，当用户向上滚动时，它们会到达页面顶部/第一部分，其上方有垫片，但不会触发航点事件。我尝试过使用偏移并让它说150但它仍然没有在顶部触发。

我的js代码：

// FOR SCROLLING
$('body section').waypoint(function() {
    var id = $(this).attr('id');
    var subTarget = $('#sub-nav li a[href=#'+id+']');
        $('.current-sub-nav').removeClass('current-sub-nav');
        subTarget.parent('li').addClass('current-sub-nav');

}, {offset: 101 });

我的html形成如下：

<header></header>
<div class="shim"></div>
<section id="uniqueid">Content</section>
<Section id="uniqueid2">Content 2</section>
<Section id="uniqueid3">Content 3</section>

触发在1/2和2/3之间正常发生，但在我向上滚动时则没有。

Answer 1

您尝试更新偏移量是正确的，因为这是问题所在。基本上，第一部分的顶部从未返回到视口的顶部，因此它没有触发航点。如果你要将偏移量设置为0，你会遇到同样的问题，除了第三部分不会触发航路点。

这是两个解决方案;我想出了一些人为的标记来反对。它们可能需要稍微修改以匹配您的特定标记;鉴于问题本身缺乏细节。

First Solution Fiddle - 此选项几乎按照描述的方式维护您的标记。我将偏移量切换为1％，这似乎已经成功了。

<强> HTML

<header></header>
<nav class="navbar navbar-inverse navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <ul id="sub-nav" class="nav navbar-nav">
            <li class="active"><a href="#uniqueid">Content</a></li>
            <li><a href="#uniqueid2">Content2</a></li>
            <li><a href="#uniqueid3">Content3</a></li>
        </ul>
    </div>
</nav>
<div class="shim" style="margin-top: 50px;"></div>
<section id="uniqueid" style="height: 600px; background-color: red;">Content</section>
<section id="uniqueid2" style="height: 600px; background-color: white;">Content 2</section>
<section id="uniqueid3" style="height: 600px; background-color: blue;">Content 3</section>

<强>的Javascript

// FOR SCROLLING
$('body section').waypoint(function () {
    var id = $(this).attr('id');
    var subTarget = $('#sub-nav li a[href=#' + id + ']');
    $('.active').removeClass('active');
    subTarget.parent('li').addClass('active');    
}, { offset: '1%' });

Second Solution Fiddle - 此解决方案通过移除垫片并在第一个容器的顶部添加边距来稍微修改您的标记。

<强> HTML

<header></header>
<nav class="navbar navbar-inverse navbar-default navbar-fixed-top" role="navigation">
    <div class="container">
        <ul id="sub-nav" class="nav navbar-nav">
            <li class="active"><a href="#uniqueid">Content</a></li>
            <li><a href="#uniqueid2">Content2</a></li>
            <li><a href="#uniqueid3">Content3</a></li>
        </ul>
    </div>
</nav>
<section id="uniqueid" style="height: 1100px; background-color: red; margin-top: 51px;">Content</section>
<section id="uniqueid2" style="height: 1100px; background-color: white;">Content 2</section>
<section id="uniqueid3" style="height: 1100px; background-color: blue;">Content 3</section>

<强>的Javascript

// FOR SCROLLING
$('body section').waypoint(function () {
    var id = $(this).attr('id');
    var subTarget = $('#sub-nav li a[href=#' + id + ']');
    $('.active').removeClass('active');
    subTarget.parent('li').addClass('active');

}, { offset: 50 });

当用户使用Jquery和Waypoints滚动到页面顶部时如何触发事件？

1 个答案: