代码之家 › 专栏 › 技术社区 › TJ Sherrill

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

jquery-waypoints jquery javascript

TJ Sherrill · 技术社区 · 10 年前

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

我有多个

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

其保存页面的内容。由于固定的导航条(高度:100px),我在页面顶部也有垫片。

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

问题是,当用户向上滚动时,他们会到达页面顶部/第一部分,填充程序位于其上方,但不会触发waypoints事件。我已经尝试过使用偏移量,并将其设置为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之间,但当我向上滚动时不会发生。

1 回复 | 直到 10 年前

drneel windsurf88 10 年前

您尝试更新偏移量是正确的,因为这就是问题所在。基本上,第一部分的顶部永远不会从视口的顶部回来,因此它不会发射航路点。如果你将偏移设置为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>

Java脚本

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

Java脚本

// 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 });