到达页面底部时显示页脚

I saw some similar questions, but they didn't give me a solution. I would like my footer show (slideUp) when reaching the bottom of the page and hide again when scrolling towards the top. Now i'm using a script that shows the footer after a certain amount of scrolling.

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

Here the Fiddle

这里的小提琴

Does anyone know how?

有谁知道怎么样？

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

3 个解决方案

#1

    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);
    	}
    });

For better performance, put the window height calculation and document height calculation outside of scroll function and run it instead once after load ($(){}) and recalculate it on window resize ($(window).resize(function(){})

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

#2

Try this check working jsfiddle

尝试这个检查工作jsfiddle

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

#3

Compare $(this).scrollTop() to your window/body height and not to a fixed value.

比较$（this）.scrollTop（）到您的窗口/身高，而不是固定值。

#1

    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);
    	}
    });

#2