Question

我有一个div包含一个长长的多屏博客文章。长度取决于内容。我希望在通过div的三分之一时触发一个航路点。我理解偏移功能，但这似乎适用于div在屏幕下方显示的距离。我没有能力修改HTML以包含任何标识符;我需要完全通过Javascript来完成它。

$('.article-body').waypoint({
  handler: function() {
    alert('Hit midpoint of my context');
  },
  context: ".article-body",
  offset: $(".article-body").height * 0.33
});

示例HTML：

<body>
    <div class="article-body">
        CONTENT CONTENT CONTENT
    </div>
<body>

Answer 1

我看到丹尼尔的答案已被接受，但是这里有如何使用Waypoints：一个返回负数的偏移函数。

偏移总是以从元素顶部到窗口顶部的距离为准。我们假设我们有一个300像素高的元素。如果我们将偏移设置为-100，那么当元素的前三分之一滚动过去时，该偏移会产生触发效果。现在让我们做一个动态函数：

offset: function() {
  return this.element.offsetHeight / -3;
}

Answer 2

这是全局变量的草率，但你会得到这个想法;它的要点是提前确定你想要“航路点”被触发的位置，然后观察窗口滚动直到它到达那一点。

（请注意，如果您的内容在页面加载后发生变化，则需要重新计算waypointPos。您可以每次都动态计算它，但滚动事件频繁触发，可能会导致拖延;我会轮询窗口在较慢的时间间隔内滚动位置，而不是在窗口滚动期间不断进行DOM计算。）

// determine the scroll position where we want to do something, which is the element's top offset plus half of its height:
var waypointPos = ($('.hasWaypoint').height() / 2) + $('.hasWaypoint').offset().top;

// watch window scroll until we search that point:
var waypointTriggered = false;
$(window).scroll(function() {
  if (!waypointTriggered && $(window).scrollTop() >= waypointPos) {
    alert("Halfway there!");
    waypointTriggered = true; // don't keep triggering endlessly
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p style="height:200px">This is extra stuff whose height we want to ignore</p>
<div class="hasWaypoint" style="height: 3000px;border:1px solid">This is the big div</div>

在div的中途触发一个航点

2 个答案: