div 中途触发航点

Question

我有一个 div，其中包含一个很长的多屏幕博客 post。长度因内容而异。我想在经过 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

这对全局变量有点草率，但你会明白的；它的要点是提前确定您希望触发 "waypoint" 的位置，然后观察 window 滚动直到到达该点。

（请注意，如果您的内容在页面加载后发生变化，您将需要重新计算 waypointPos。您可以每次都即时计算它，但滚动事件触发的频率足够高，可能会导致延迟；我会投票window 以较慢的时间间隔滚动位置，而不是在 window 滚动期间不断地进行 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>

Answer 2

我看到 Daniel 的回答已被接受，但这里是如何使用 Waypoints 来做到这一点：returns 负数的偏移函数。

偏移量总是根据元素顶部到 window 顶部的距离。假设我们有一个 300px 高的元素。如果我们将偏移量设置为 -100 ，那么当元素的前三分之一滚动过去时会产生触发效果。现在让我们把它变成一个动态函数：

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

div 中途触发航点

Trigger a waypoint when halfway through a div

html

javascript

css

jquery

jquery-waypoints