固定的页脚在滚动到页面底部时会扩展

Question

I'd like to achieve pretty exactly a footer solution as shown here: http://downtothewire.co.nz/ppp-2010/ 我想实现一个完全像下面这样的页脚解决方案： http : //downtothewire.co.nz/ppp-2010/

Only a narrow portion of the footer is displayed and fixed to the bottom of the browser window. 只显示页脚的一小部分，并将其固定在浏览器窗口的底部。 When the user scrolls to the bottom of the page, the rest of footer is revealed. 当用户滚动到页面底部时，将显示其余页脚。

I've found this here https://github.com/ark1/Sticky-Footer-jQuery-Plugin 我在这里找到了这个https://github.com/ark1/Sticky-Footer-jQuery-Plugin

But cannot get it to work... The suggested minimum usage code doesn't seem to help much: jsFiddle 但是无法正常工作...建议的最低使用率代码似乎无济于事： jsFiddle

Minimum CSS: 最低CSS：

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

Ideal markup example: 理想的标记示例：

<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>

Example usage: 用法示例：

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

Apologies, my JS skills are less than poor, but I'd appreciate some help, or pointers to another existing script that would do this. 抱歉，我的JS技能还不算差，但是我希望能获得一些帮助，或者希望可以找到其他现有脚本的指针。

Many thanks. 非常感谢。

Answer 1

Take a look at this fiddle here http://jsfiddle.net/c3VUy/3/ 看看这里的小提琴http://jsfiddle.net/c3VUy/3/

I saw a couple of problems with your fiddle. 我看到您的提琴有几个问题。 Firstly, because the container has no content it didn't have any height pushing the footer down, thus there was nothing to scroll down to to initiate the footer. 首先，由于容器没有内容，因此没有任何高度可将页脚向下推，因此无需向下滚动即可启动页脚。

Secondly, the order of your javascript. 其次，您的JavaScript的顺序。 You were calling the stickyfooter script before including it. 您在添加stickyfooter脚本之前先对其进行了调用。

And the third is that because there was no content in your footer with any height, once it did reach the bottom it wouldn't expand. 第三点是因为页脚中没有任何高度的内容，一旦到达底部，就不会扩展。

Make sure you include 确保包括

jquery.heyday.stickyfooter.js

Before you call 致电之前

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

A few notes : 一些注意事项：

You will notice I have added these CSS rules, they shouldn't be required once your container and footer contain content. 您会注意到我已经添加了这些CSS规则，一旦您的容器和页脚包含内容，就不再需要它们了。 I have simply put them in for demonstration! 我只是把它们放在示范上！

#Container{
    height:1000px;
}

#Footer p{
    height:300px;   
}

固定的页脚在滚动到页面底部时会扩展

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-04-07 11:24:35

固定的页脚在滚动到页面底部时会扩展

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-04-07 11:24:35

解决方案1
1 已采纳 2014-04-07 11:24:35