jquery - 内容后面的页脚

Question

我正在尝试在滚动到网站末尾时在内容后面显示页脚，这很难解释，所以我做了这个 gif

http://imageshack.us/f/687/newdw.gif/

我尝试在网络上搜索教程，但发现的并不是我要找的内容(我所看到的只是向上滑动和向下滑动页脚)。

如果您能给我指点教程或解释如何操作，将会有很大帮助。

Answer 1

以下内容应该只使用 css 即可完成您想要的操作。

http://jsfiddle.net/zVLrb/

此解决方案依赖于具有 position:fixed 的元素的行为方式。此代码意味着在较短的页面上 - 即不会导致滚动条出现的页面，页脚将保持固定在页面底部，而不是内容。

基本上，当用户滚动时，页脚始终附加到窗口/视口(viewport)的底部，但大多数时候您看不到它，因为页面的其余部分 float 在其上方 - 这是造成的对页面内容使用比页脚更高的 z-index。通过使用与页脚相同高度的底部边距，我们允许页脚出现的空间，但仅在页面底部。 :)

这应该适用于所有现代浏览器，但是您应该在 IE7 中进行测试以确保(因为我现在手边没有)。

CSS

.rest {
    position: relative;
    z-index: 100;
    background: #fff;
    margin-bottom: 200px;
    overflow: hidden;
}

.footer {
    height: 200px;
    width: 100%;
    background: #000;
    position: fixed;
    bottom: 0;
    z-index: -1;
    color: white;
    text-align: center;
    font-size: 20pt;
}

.footer p {
    margin-top: 50px;
}

标记

<div class="rest">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut feugiat
    euismod urna, eget interdum eros elementum in. Morbi dictum molestie
    porta. Morbi eget consectetur nibh. Etiam sed arcu ac elit dignissim
    consequat.
  </p>
  <!-- obviously this content would need to go on for longer to 
       cause the page to scroll //-->
</p>
</div>
<div class="footer">
    <p>This is the footer</p>
</div>

更新

我不太记得了，但我认为对于较旧的 Internet Explorer，负 z 索引可能会将页脚置于 body 层下方。(意味着它根本不可见) 因此，最好对 .rest 使用 z-index:2，对页脚使用 z-index:1。我暂时没有机会测试它，但会在可以的时候进行更新。