修复了滚动到页面底部时扩展的页脚答案

【问题标题】：Fixed footer that expands when scrolled to bottom of page修复了滚动到页面底部时扩展的页脚
【发布时间】：2014-04-07 10:55:29
【问题描述】：

我想实现一个非常精确的页脚解决方案，如下所示：http://downtothewire.co.nz/ppp-2010/

只有页脚的一小部分显示并固定在浏览器窗口的底部。当用户滚动到页面底部时，会显示页脚的其余部分。

我在这里找到了这个https://github.com/ark1/Sticky-Footer-jQuery-Plugin

但无法让它工作......建议的最低使用代码似乎没有多大帮助：jsFiddle

最低 CSS：

.liner {margin:0 auto;width:960px;}
#Footer {width: 100%;z-index:100;position:relative;overflow: hidden}

理想的标记示例：

<body>
<div id="Container" class="liner">
<p>Main content</p>
</div>
<div id="Footer">
    <div class="liner">
        <p>Centred footer content</p>
    </div>
</div>
</body>

示例用法：

$('#Footer').stickyfooter();

抱歉，我的 JS 技能并不差，但我会很感激一些帮助，或者指向另一个现有的脚本可以做到这一点。

非常感谢。

【问题讨论】：

以下是该网站如何完成页脚jsfiddle.net/9REfa/5 的快速示例

标签： javascript jquery html css scroll

【解决方案1】：

看看这个小提琴http://jsfiddle.net/c3VUy/3/

我看到你的小提琴有几个问题。首先，因为容器没有内容，它没有任何高度将页脚向下推，因此没有任何东西可以向下滚动来启动页脚。

其次，你的 javascript 的顺序。您在包含它之前调用了stickyfooter 脚本。

第三个是因为你的页脚中没有任何高度的内容，一旦它到达底部就不会展开。

确保包含

jquery.heyday.stickyfooter.js

打电话之前

$(function() {
    $('#Footer').stickyfooter();
});

几点说明：

您会注意到我已经添加了这些 CSS 规则，一旦您的容器和页脚包含内容，就不需要它们。我只是将它们放入演示中！

#Container{
    height:1000px;
}

#Footer p{
    height:300px;   
}

【讨论】：

谢谢一百万。我马上试试这个。我对这不适用于更高版本的 jQuery 吗？
没错。 .browser 调用（在此stickyfooter 插件中使用）已在 jquery 1.9 中删除 - 请参见此处：jquery.com/upgrade-guide/1.9
嗨尼克，如果可以的话，请快速跟进问题：脚本如何确定折叠时页脚的可见程度？我需要根据我需要显示的特定内容进行调整，但我无法弄清楚脚本是如何产生负下边距的，或者如何改变它......非常感谢
道歉 -- 我刚刚在脚本中找到了这个设置（可见：30，）再次感谢