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

Question

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

有谁知道实现此目的的简单方法吗？ Here's a fiddle.

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

Answer 1

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

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

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

编辑：我忘了一件事！！ 你需要一个 class 作为粘性 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/

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

Make jQuery waypoints unstick when you hit the footer section

html

javascript

css

jquery

jquery-waypoints