当您按下页脚部分时，使jQuery路径点不受影响

Question

因此，我使用jQuery路径点作为一个粘性的社交媒体导航，但是，当我点击页脚元素时，它一直在滚动。理想情况下，我希望粘性导航在它的父容器(.content)底部，当它碰到页脚时，反之，当用户回滚时，粘性导航就会再次变粘。

有谁知道实现这一目标的简单方法吗？这里有把小提琴。

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

Answer 1

您需要在页脚中设置另一个路径点，当粘滞div将到达页脚(即使用偏移量选项设置)时，删除使div被修复的.stuck类(通过切换，当页脚允许粘性div再次显示时，.stuck类再次出现)。要做到这一点，需要：

$('.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/