Issue
.nav-header2{
background: purple;
display: flex;
justify-content: center;
align-items: center;
}
.header2-container{
width: 68vw;
height: 60px;
padding: 0 2vh;
border: 1px solid red;
border-radius: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav-header1{
background: lightblue;
display: flex;
justify-content: center;
align-items: center;
}
.header1-container{
width: 68vw;
height: 60px;
padding: 0 2vh;
border: 1px solid blue;
border-radius: 0.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
<!--header2 -->
<nav class="nav-header2">
<div class="header2-container">
<h1>header2<h2>
</div>
</nav>
<!-- header1 -->
<nav class="nav-header1">
<div class="header1-container">
<h1>header1<h2>
</div>
</nav>
I have two headers for my web page. I named header1 and header2.
I want to show header2 when scrolling down bigger than 60px and hide when scrolling is smaller than 60px.
if (scroll down bigger than 60px){ show header2 }else{ still show header1 }
I have tried many time, But I can't succeed. Please help Thank you so much!
Solution
Please check the code below when you scroll 60px and more the header 1 disappear and header 2 appear
window.addEventListener("scroll", () => {
if (scrollY >= 60) {
document.querySelector(".headerOne").style.display = "none";
document.querySelector(".headerTwo").style.display = "block";
} else {
document.querySelector(".headerTwo").style.display = "none";
document.querySelector(".headerOne").style.display = "block";
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
font-size: 60px;
background-color: gray;
}
.headerOne,
.headerTwo {
position: fixed;
top: 0;
left: 0;
background-color: white;
width: 100%;
font-size: 20px;
text-align: center;
height: 60px;
}
.headerTwo {
display: none;
}
<div class="headerOne">header 1</div>
<div class="headerTwo">header 2</div>
<section>section</section>
<section>section</section>
Answered By - Mohamad
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.