3

我对在这个网站上提问非常陌生，但是从阅读中学到了很多东西，所以非常感谢！

有点随机，在此页脚上看到了这种令人敬畏的“地毯下”风格的视差效果 - 并寻找一些关于如何将其击倒的指示？

http://ideaware.co/our_work

非常感谢任何帮助！！！

4

2 回答 2

8

相当容易！制作一个绝对定位且 z-index 低于主要内容的页脚。比把它放在你刚刚创建的 div 的 css 中： position:fixed 。另外不要忘记将内容 div 的高位缩短一点，以便看到页脚。

祝你好运！

太模糊了？只要问，我会回答！

[编辑]：

小提琴示例

对于示例，我将使用一个HTML包含两个divs. 第一个是#content容器，第二个是#footer.

<div id="content">
</div>
<div id="footer">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sagittis congue malesuada. Donec a eros ac risus facilisis pellentesque sit amet feugiat orci. Ut adipiscing, arcu sit amet facilisis condimentum, diam arcu tempus erat, at sagittis libero felis quis nisl. Interdum et malesuada fames ac ante ipsum primis in faucibus. Etiam dignissim eros nisi, ut vehicula nulla dictum vel. Aenean quis felis libero. Aliquam vulputate sem eros, sed vehicula sem tincidunt vel.</p>
 </div>

//我在页脚添加了一些文字，这样你就可以实际看到视差效果

我在内容中添加了以下div内容CSS：

     #content {
    width:100%;
    height:1500px;
    margin-bottom:200px;
    background-color:#123456;
       }

请注意将 margin-bottom属性设置为等于您的页脚height。否则你将无法看到#footerdiv。

对于css页脚是：

   #footer {
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:200px;
    z-index:-1;
    background-color:#000;
       }

请注意，position设置为fixed。这将保持#footer相对于窗口的定位，而不是相对于文档。我也设置了z-index:-1. 我这样做了，所以#footer将在#content. 如果您删除此属性，您会注意到#footer将一直结束，#content并且视差的效果消失了。

是的！这是所有的了。

于 2013-01-03T14:45:36.543 回答
0

如果页脚没有固定高度，内容流畅，您可以使用（jQuery）：

var footerParaHeight = $(".footer").height();
$(".content").css("margin-bottom",footerParaHeight);

使用前面给出的 CSS：

.content {
    /*margin being given from jQuery*/
}
.footer {
    position: fixed;
    bottom: 0px;
    left: 0px;
    z-index: -1;
}
于 2016-12-12T23:06:57.523 回答