javascript - 当您点击页 footer 分时，使 jQuery 航路点不粘

Question

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

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

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/