到达页面底部时显示页脚

Question

我看到了一些类似的问题，但是他们没有给我解决方案。 我希望到达页面底部时显示页脚（slideUp），而向顶部滚动时再次显示页脚。 现在，我正在使用一个脚本，该脚本在一定量的滚动后显示页脚。

小提琴在这里

有人知道吗？

$(window).scroll(function() {
if ($(this).scrollTop() > 10) {
    $( 'footer').slideDown(300);
} else {
    console.log('there');
    $('footer').slideUp(300);
}
});

Answer 1

试试这个检查工作jsfiddle

 $(window).scroll(function () {
        if ($(window).scrollTop() + $(window).height() == $(document).height()) {
            $('footer').slideDown(300);
        } else {
            $('footer').slideUp(300);
        }
  });

Answer 2

将$(this).scrollTop()与您的窗口/身体高度而不是固定值进行比较。

Answer 3

  var height; var trigger = 350; $(window).scroll(function() { height = $(document).height()-$(window).height(); console.log(height+" "+$(this).scrollTop()); if ($(this).scrollTop() > height - trigger) { $( 'footer').slideDown(300); } else { $('footer').slideUp(300); } }); 

为了获得更好的性能，请将窗口高度计算和文档高度计算放在滚动功能之外，然后在加载（ $(){} ）后运行一次，然后在窗口调整大小（ $(window).resize(function(){}上重新计算一次。 ）