Question

我尝试制作与http://www.t-mobile.com/类似的效果，当用户向下滚动到页面底部时，他们会显示＆＃34;页脚＆＃34;用户继续滚动时越来越多。

我试图在这里和谷歌搜索，但是我们找不到任何真正有用的东西。大多数示例仅在用户滚动到底部时显示/隐藏页脚。

所以我的问题是，通过滚动显示元素的效果是什么？有没有关于此的好教程/博客文章？我非常感谢所有帮助！

Answer 1

正如我评论的那样，你需要修复你的元素，所以解释一下，我在这里有两个元素，一个是普通的position: relative;元素，所以没什么好看的，我分配了relative这样我就可以使z-index工作

第二个元素位于fixed，并确保您使用{strong}等于的margin-bottom到页脚的height，无需分配对此元素的任何否定z-index。

不多 HTML ...

<div></div>
<div>Reveal Me</div>

<强> CSS

/* These are for your main site wrapper */
div:first-child {
    height: 800px; /* Even auto is fine, I 
                      used fixed height because I don't have any content here */
    background: #eee;
    margin-bottom: 200px; /* Equals footer wrappers height */
    z-index: 1;
    position: relative;
}


/* These are for footer wrapper */
div:last-child {
    background: #aaa;
    height: 200px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

对于动态尺寸

请注意，对于fixed定位元素使用固定高度，如果在页脚元素中有变量height，则需要使用JS或jQuery来计算高度

$('#wrapperElement').css('margin-bottom', $('#footer').height());

此处，#wrapperElement和#footer的选择器是我假设的选择器，您可以用自己的选择器替换它们。

关于固定元素的东西 - 水平居中 （我认为这会对某些用户有所帮助）

当你修复你的元素时，它会退出文档流，所以如果你将fixed赋值给页脚元素的包装并希望将一些内容放在那里，那么将另一个元素嵌入其中该包装器并使用width和margin: auto; ...

Demo 2

<强> HTML

<div></div>
<div>
    <div>Reveal Me</div>
</div>

<强> CSS

body > div:first-child {
    height: 800px;
    background: #eee;
    margin-bottom: 200px;
    z-index: 1;
    position: relative;
}

body > div:last-child {
    background: #aaa;
    height: 200px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

body > div:last-child div {
    width: 80%;
    margin: auto;
    outline: 1px solid red; /* To show that element is horizontally centered */
}

注意：此答案中使用的选择器过于笼统且适合使用快速演示目的，在实际项目中，确保您使用特定选择者

如何通过滚动显示元素？

1 个答案:

对于动态尺寸