<分区>
<分区>
我有一个网站的以下 HTML 和 CSS，您也可以在 JSfiddle 中找到它们 here :
body {
margin: 0;
}
/* 01.00 HEADER */
.header {
width: 80%;
height: 10%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: yellow;
}
.image {
width: 30%;
height: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: green;
}
.navigation {
width: 70%;
height: 100%;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: aqua;
}
/* 02.00 NAVIGATION */
.navigation>ul {
height: 100%;
display: flex;
list-style: none;
margin: 0;
padding: 0;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: blue;
}
.navigation>ul>li {
width: 100%;
display: flex;
justify-content: center;
text-align: center;
align-items: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
/* 03.00 CONTENT */
.image_animation {
width: 80%;
margin-left: 10%;
margin-top: 10%;
float: left;
display: flex;
justify-content: space-between;
background-color: green;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list {
width: 100%;
position: relative;
background-color: red;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
}
.image_list img {
width: 100%;
height: 100%;
}
.image1 {
height: 100%;
width: 100%;
float: left;
position: absolute;
}
.image2 {
height: 100%;
width: 100%;
float: left;
animation-delay: 2s;
}
.image_list div {
animation-name: animation_home_images;
animation-duration:4s;
animation-iteration-count:infinite;
animation-fill-mode: forwards;
opacity:0;
}
@keyframes animation_home_images {
50.0% {
opacity: 1
}
0%, 100%{
opacity: 0
}
}<div class="header">
<div class="image">
Image
</div>
<nav class="navigation">
<ul>
<li> 1.0 Main Menu </li>
<li> 2.0 Main Menu </li>
<li> 3.0 Main Menu </li>
</ul>
</nav>
</div>
<div class="image_animation">
<div class="image_list">
<div class="image1"><img src="http://placehold.it/101x101"></div>
<div class="image2"><img src="http://placehold.it/201x201"></div>
</div>
</div>如您所见，我有一个 .header，其属性 postion: fixed; 包含一个 .image 和一个 。导航。在 .header 下方，我有一个 .image_animation，其中包含两个图像，一旦用户打开网站，它就会运行 infinite。
到目前为止一切正常。
现在，我面临的问题是，一旦用户向下滚动页面，.header 就会保持不变，但动画图片会停留在固定的 .header 之上。
据我所知，此问题是由 .image1 的 position: absolute; 引起的。
但是，基于 this 中的答案质疑 position: absolute; 是使 .image_animation 工作所必需的。
如何更改我的代码，使 .image_animation 正常工作，并在用户向下滚动页面时让它位于 fixed header 下方？
最佳答案
关于jquery - 如果向下滚动网站，固定标题下方的图像动画，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54341648/