В следующих HTML и CSS я создал заголовок и анимацию изображения, которые вы также можете найти в JSfiddle здесь :
body {
margin: 0;
}
/* 01.00 HEADER: Items in header */
.header_01 {
width: 80%;
height: 10vh;
position: absolute;
margin: auto;
top: 0;
left: 0;
right: 0;
z-index:99;
text-align: center;
box-sizing: border-box;
border-style: solid;
border-width: 1px;
background-color: orange;
}
.header_02 {
width: 80%;
height: 10vh;
margin: 10vh auto 0;
position: sticky;
z-index:99;
top:0;
display: flex;
justify-content: space-between;
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: 15%;
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_01">
This is our webpage.
</div>
<div class="header_02">
<div class="image">
Image
</div>
<nav class="navigation">
<ul>
<li class="button_01"> 1.0 Main Menu </li>
<li class="button_01"> 2.0 Main Menu </li>
<li class="button_01"> 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, состоящий из двух частей. Первый .header_01 должен исчезнуть, когда пользователь прокручивает страницу вниз, тогда как второй .header_02 должен оставаться фиксированным. Первоначально я достиг этого с ответом на вопрос здесь .
Пока все это работало нормально.
Теперь я добавил .image-animation под заголовком со свойством postion: absolute;, которое необходимо для работы анимации. Поэтому я также добавил z-index к своему CSS, как описано в ответах здесь , чтобы получить анимацию под заголовком, когда пользователь прокручивает страницу вниз.
Однако почему-то я не могу заставить работать z-index в сочетании со свойством position: sticky;, потому что когда я прокручиваю вниз, оба заголовка исчезают.
Есть ли у вас какие-либо идеи, что мне нужно изменить в моем коде, чтобы пользователь прокручивал вниз:
а) первый .header_01 исчезает и
б) второй .header_02 остается фиксированным и
в) .image-animation идет за заголовком.