Question

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

随机一点，在这个页脚上看到了这个很棒的“地毯下”风格的视差效果 - 并寻找一些关于它如何被敲掉的指示？

http://ideaware.co/our_work

非常感谢任何帮助!!!

Answer 1

非常简单！创建一个绝对定位的页脚，其z-index低于主要内容。把它放在刚刚创建的div的css中：位置：固定。另外，不要忘记使内容div的高点更短，以便看到页脚。

祝你好运！

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

[编辑]：

fiddle example

对于示例，我将使用一个简单的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。否则你将无法看到#footer div。

页脚的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并且视差效果会丢失。

所以是的！这就是全部。

Answer 2

如果页脚没有固定的高度，可以使用（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;
}

创造一个'地毯下'的视差页脚？

2 个答案: