当您点击页脚部分时,使jQuery航点无法取消

Question

因此,我正在使用jQuery waypoints来实现完美的粘性社交媒体导航,但是,当我点击页脚元素时,它会一直滚动.理想情况下,我希望粘性导航器在它触及页脚时保持在其父容器(.content)的底部,相反,当用户向上滚动时,粘性导航器应该再次变粘.

有谁知道实现这个的简单方法？这是一个小提琴.

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

Answer 1

你需要在页脚中设置另一个航点,当粘性div到达页脚时(使用偏移选项设置),删除.stuck使div固定的.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/