当您点击页脚部分时，使 jQuery 航点不粘连

Question

所以我将 jQuery 航点用于粘性社交媒体导航，它运行良好，但是，当我点击页脚元素时，它会继续滚动。理想情况下，我希望粘性导航在到达页脚时停留在其父容器（.content）的底部，反之，当用户向上滚动时，粘性导航应该再次变得粘性。

有谁知道实现这一目标的简单方法？ Here's a fiddle.

var sticky = new Waypoint.Sticky({
  element: $('.sticky')[0]
});

Answer 1

您需要在页脚中设置另一个航点，当粘性 div 将到达页脚时（即使用偏移选项设置），删除使 div 固定的 .stuck 类（使用切换，.stuck 类在页脚让粘性 div 再次显示时再次出现）。您可以通过以下方式实现：

$('.footer').waypoint(function(direction) {
    $('.sticky').toggleClass('stuck', direction === 'up')
}, {
offset: function() {
    return $('.sticky').outerHeight()
}});

检查这是否是您想要的（希望如此！:)）：https://jsfiddle.net/elbecita/mna64waw/3/

编辑：我忘了一件事！当页脚超过它时，您需要一个用于粘性 div 的类，所以您需要的最终 js 是：

$('.footer').waypoint(function(direction) {
    $('.sticky').toggleClass('stuck', direction === 'up');
    $('.sticky').toggleClass('sticky-surpassed', direction === 'down');
}, { offset: function() {
       return $('.sticky').outerHeight();
}});

.sticky-surpassed 将是：

.sticky-surpassed {
    position:absolute;
    bottom: 0;
}

在此处查看更新：https://jsfiddle.net/elbecita/mna64waw/5/