如果向下滚动网站,则固定标题下的图像动画 [英] Image animation below fixed header if website is scrolled down
问题描述
对于网站,我具有以下HTML
和CSS
,您也可以在JSfiddle
这里:
I have the following HTML
and CSS
for a website which you can also find in the 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
和一个.navigation
.用户打开网站后,在.header
下方有两个运行infinite
的图像.image_animation
.
As you can see I have a .header
with the property postion: fixed;
containing an .image
and a .navigation
. Below the .header
I have an .image_animation
of two images running infinite
once the user opens the website.
到目前为止,所有这些都工作正常.
All this works fine so far.
现在,我面临的问题是,一旦用户向下滚动页面,.header
就会保持固定,但是动画图片仍位于固定的.header
顶部.
据我所见,此问题是由.image1
的position: absolute;
引起的.
但是,基于此的答案,对.image_animation
正常工作所必需的.
Now, I am facing the issue that once the user scrolls down the page the .header
remains fixed but the animated pictures stay on top of the fixed .header
.
As far as I can see this issue results from the position: absolute;
of the .image1
.
However, based on the answer in this question the position: absolute;
is necessary to make the .image_animation
work.
当用户向下滚动页面时,如何更改代码以同时使.image_animation
起作用并使其位于fixed header
下面?
How can I change my code to make both the .image_animation
work and let it go below the fixed header
once the user scrolls down the page?
推荐答案
尝试一下.在.header中添加z-index
Try this. add z-index in .header
body {
margin: 0;
}
/* 01.00 HEADER */
.header {
width: 80%;
height: 10%;
margin-left: 10%;
display: flex;
justify-content: space-between;
position: fixed;
top: 0;
z-index:99;
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>
这篇关于如果向下滚动网站,则固定标题下的图像动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!