css - 页面内容滚动横幅 (CSS)

Question

我无法弄清楚如何制作“折叠页眉”，页面内容在横幅图像上滚动。我敢肯定，这个问题已被问过数千次，但这是一个有趣的案例，因为 header div 的设置方式和 <main> 的使用标签(使用方形空间模板)。

我希望这可以单独使用 CSS 来实现，我在搞乱 z-index 和 position 属性时运气不错，但是我没能达到预期的效果。我得到的最接近的是一个固定的横幅图像，主页文本可以在横幅上滚动——但横幅在文本后面仍然可见。

我将不胜感激任何帮助，或者只是有人为我指明正确的方向!

我在这里找到了一个很好的例子 https://line25.com/tutorials/how-to-create-a-simple-collapsing-header-effect

网址是https://lendr.us

谢谢!!!

编辑:

这是我一直在引用的 CodePen:c o d e p e n .io/nickcil/pen/oiahg

基本上，问题不是这个:

<div class="header"><h1>Header</h1></div>
<div class="content"><h1>Content</h1></div>

我有这个:

<div class="header"><h1>Header</h1></div>
<main id="page"><h1>Content</h1></div>

我想这才是真正的问题所在，我试图让主要部分与 header div 重叠，而不是仅仅重叠一个 div。我对编码还很陌生，所以这对我来说真的很难，我不确定是否可行。

Answer 1

我修好了!如果其他人遇到此问题，这就是使用 Bedford 模板创建视差效果的有效方式。

这是一个定位和 z-index 问题，这是我使用的 CSS:

@media only screen and (min-width: 641px) {
.transparent-header.view-list .banner-thumbnail-wrapper, .transparent-
header.collection-type-page .banner-thumbnail-wrapper {
padding: 240px 0 155px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
}

@media only screen and (min-width: 641px) {
#promotedGalleryWrapper .color-overlay, .promoted-gallery-wrapper .color-
overlay, .banner-thumbnail-wrapper .color-overlay, .sqs-featured-posts-
gallery .color-overlay {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,.3);
z-index: 1;
}
}

@media only screen and (min-width: 641px) {
#thumbnail {
position: fixed;
top: -110px;
left: 0;
bottom: 0;
right: 0;
-webkit-animation: feature-bg-anim .6s ease-in-out;
animation: feature-bg-anim .6s ease-in-out;
}
}

@media only screen and (min-width: 641px) {
.desc-wrapper {
-webkit-animation: feature-text-anim 1.25s ease-in-out;
animation: feature-text-anim 1.25s ease-in-out;
position: relative;
}
}

@media only screen and (min-width: 641px) {
#page {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: auto;
margin: auto;
max-width: inherit;
padding: auto;
-moz-osx-font-smoothing: auto;
-webkit-font-smoothing: subpixel-antialiased;
position: relative;
z-index: 10;
background: white;
top: 670px;
}
}

@media only screen and (min-width: 641px) {
#preFooter {
color: rgba(255,255,255,.7);
position: relative;
bottom: 0;
z-index: 50;
left: 0;
right: 0;
top: 670px;
}
}

@media only screen and (min-width: 641px) {
#footer {
background-color: #1f1f1f;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
position: relative;
bottom: 0;
z-index: 50;
left: 0;
right: 0;
top: 670px;
}
}

快速而肮脏，但它完成了工作!希望这可以帮助遇到类似问题的人!