I want to change the site title's h1(.site-h1) to another text when down scrolling with jquery. For example, "my site" changes "welcome" when scrolling.
////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
<nav class="navbar">
<div class="navbar-container">
<div class="site-h1">
<h1>my title</h1>
</div>
<div class="menu-bar">
<div class="menu-title">
<h2><i class="fas fa-bars"></i> MENU</h2>
</div>
</div>
<div class="contactme">
<button type="button" name="button">CONTACTME</button>
</div>
</div>
</nav>
.navbar {
background-color: #F4F7F6;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.navbar .site-h1 h1 {
text-align: center;
font-family: 'Oleo Script', cursive;
color: #202221;
font-size: 2rem;
margin-top: 1rem;
}
.navbar .menu-title {
cursor: pointer;
}
.navbar .menu-title h2 {
margin-top: -65px ;
padding: .7rem 1.2rem;
font-family: 'Roboto Slab', serif;
font-size: .8rem;
font-weight: lighter;
transition: 1s;
}
.navbar .menu-title h2:hover {
color: #A6ABAB;
}
.navbar .contactme {
text-align: right;
margin-top: -50px;
padding-right: 1rem;
font-family: 'Roboto Slab', serif;
padding-bottom: 1rem;
}
.navbar .contactme button {
background-color: #DF3E7B;
color: #F4F7F6;
border: none;
border-radius: 1rem;
padding: .7rem;
font-weight: bold;
font-size: .8rem;
cursor: pointer;
}
.navbar .contactme button:hover {
background-color: #dd85a5;
}