激活 div 顶部和底部的航点 - jQuery

Question

当用户从同一div的顶部和底部滚动时，我正在尝试激活航点。然后，这将更改导航元素上的活动状态。我知道默认值是div 的顶部，但我如何同时执行这两项操作？

$('#1').waypoint(function() {
   $(".desktop-menu ul li").children().removeClass("active"); $(".desktop-menu ul li ul li").children().removeClass("active");
   $("#chapt-1").addClass("active");
}, { offset: 0 });

Answer 1

在

id="#1"元素后面附加一个带有id="#1-bottom"的元素，并在其上声明一个航点。

然后，从上到下滚动将首先触发#1 waypoint，从下到上滚动将首先触发#1-bottom waypoint。

.HTML

<div id="#1">[...]</div>
<div id="#1-bottom"></div>

jQuery

$('#1').waypoint(function () { [top to bottom logic] });
$('#1-bottom').waypoint(function () { [bottom to top logic] });