Есть следующий код. Нужно, чтобы при скролле у меня шапка плавно меняла свой вид на новый. Проще говоря, в обычном состоянии шапка должна быть одного вида, а при скролле та должна скрываться и поменяться на новую, которая до этого была скрыта. Помогите пожалуйста реализовать идею... горизонтальную черту можно убрать, таким образом просто разделила 2 шапки друг от друга
.normalCondition {
background: lightblue;
}
.header__blockFirst {
display: flex;
width: 100%;
height: auto;
justify-content: space-between;
}
.header__blockFirst div:hover {
background: blue;
color: white;
}
.one {
width: 60px;
height: 20px;
background: lightgreen;
}
.two{
height: 1px;
width: 100%;
border: 0;
outline: none;
background-color: white;
margin-top: 5px;
}
.header__blockThird {
display: flex;
justify-content: space-between;
}
.three {
width: 90px;
background: green;
}
.three:hover {
background: lightgreen;
}
.ifScroll {
display: flex;
justify-content: space-between;
background: pink;
width: 100%;
height: auto;
}
<!-- показывать в обычном состоянии --!>
<header class="normalCondition">
<div class="header__blockFirst">
<div class="one">home</div>
<div class="one">about</div>
<div class="one">contacts</div>
<div class="one">address</div>
<div class="one">consul-n</div>
</div>
<div class="two"></div>
<div class="two"></div>
<div class="header__blockThird">
<button>---</button>
<div class="three">1</div>
<div class="three">2</div>
<div class="three">3</div>
<div class="three">4</div>
<div class="three">5</div>
<div class="three">6</div>
</div>
</header>
<hr>
<!-- показывать при скролле --!>
<header class="ifScroll">
<button>---</button>
<div class="blockFirst">
<div class="header__blockFirst">
<div class="one">home</div>
<div class="one">about</div>
<div class="one">contacts</div>
<div class="one">address</div>
<div class="one">consul-n</div>
</div>
<div class="header__blockThird">
<div class="three">1</div>
<div class="three">2</div>
<div class="three">3</div>
<div class="three">4</div>
<div class="three">5</div>
<div class="three">6</div>
</div>
</div>
<div class=""></div>
</div>
</header>
<div class="content">
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.
Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>