javascript - 如何使滚动页脚固定然后返回滚动

Question

大家好，我看过所有这些粘性页脚脚本和粘性侧边栏脚本!我想要的是类似的东西，我有一个带页脚的长页面，然后在页脚下方有更多内容，我希望页面仅在内容到达页脚时显示页脚，一旦页脚显示在屏幕上，它就会固定在底部，这样我就可以继续滚动页面并查看“更多内容”，当向上滚动时，页脚会从固定在底部的位置分离，恢复正常!

我附上了一张截图，也许有助于更好地解释它!

Answer 1

嗯，这需要一些步骤...

• 获取窗口滚动了多少。
• 检查它是否滚动到我们希望页脚开始固定不动的位置。
• 该点是窗口高度 - 页脚高度的总和。
• 如果该点再次回到原点，则保持原样。
• 为滚动事件添加功能。因此，它会检查所有内容并在需要时完成工作。

在此处查看演示:http://jsfiddle.net/techsin/MgQQm/2/embedded/result/

在此处查看代码: http://jsfiddle.net/techsin/MgQQm/2/

$footer = $('#footer');
$win = $(window);
var ipos = $footer.offset().top;
var wpos, space, width;
width = $footer.width();

function h(e) {
    wpos = $win.scrollTop();
    space = $win.height() - $footer.height();
    if ((wpos + space) > ipos) {
        $footer.addClass('fixed');
        $footer.width(width);
    } else {
        $footer.removeClass('fixed');

    }
}


$(window).scroll(h);