Question

我想要实现一个非常完整的页脚解决方案，如下所示：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技能不是很差，但我会感谢一些帮助，或指向另一个可以做到这一点的现有脚本。

非常感谢。

Answer 1

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

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

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

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

确保包含

jquery.heyday.stickyfooter.js

致电之前

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

一些注释：

您会注意到我添加了这些CSS规则，一旦您的容器和页脚包含内容，就不应该要求它们。我只是把它们放进去进行演示！

#Container{
    height:1000px;
}

#Footer p{
    height:300px;   
}

固定页脚在滚动到页面底部时展开

1 个答案: