Question

我无法弄清楚如何制作一个折叠标题＆＃39;，其中页面内容滚动横幅图片。这个问题已被问过几千次了，我确定，但这是一个有趣的案例，因为标题div是如何设置的，以及'q'标签的使用（使用方形空间模板）

我希望单独使用CSS可以实现这一点，我在弄乱z-index和位置属性方面有一些运气，但是我还没有达到预期的效果。我最接近的是一个固定的横幅图片，主页面文字可以在横幅上滚动 - 但横幅仍然可以在文字后面看到。

我很感激任何帮助，或者只是有人指出我正确的方向！

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

网站为https://lendr.us

谢谢!!!

编辑：

这是我所引用的CodePen：c o d e e。。/ nickcil / pen / oiahg

基本上，问题不在此：

inp = raw_input()

while inp != 'q':
    inp = raw_input()
    print 'hello world'

我有这个：

<main>

我认为这确实是问题所在，而不是只做div重叠，我试图使主要重叠成为标题div。我对编码很陌生，所以这对我来说真的很难，我不确定它是否可能。

Answer 1

我修好了！如果其他人遇到此问题，这实际上是使用贝德福德模板创建视差效果的方法。

这是一个定位和z索引问题，这是我使用的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;
}
}

快速又脏，但它完成了工作！希望这可以帮助有类似问题的人！

页面内容滚动横幅（CSS）

1 个答案: