Home » Jquery » javascript – How to change site title on scroll

javascript – How to change site title on scroll

Posted by: admin February 22, 2020 Leave a comment

Questions:

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>&nbsp;&nbsp;&nbsp;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;
}
How to&Answer:

By when scrolling, I assume that you mean on all the document. For this we use jQuery scroll method.
But you can notice that in order to optimize it, I’m using jQuery One here to prevent the script from firing the event many times at every tiny scroll change.

$(window).one('scroll', function() {
    $('.site-h1 h1').text('Welcome! Happy Scrolling :)');
    console.log('scroll detected!');
});
.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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha256-L/W5Wfqfa0sdBNIKN9cG6QA5F2qx4qICmU2VgLruv9Y=" crossorigin="anonymous" />
<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>&nbsp;&nbsp;&nbsp;MENU</h2>
          </div>
        </div>
        <div class="contactme">
          <button type="button" name="button">CONTACTME</button>
        </div>
      </div>
    </nav>
    <div class="somespace">
    <p>Lorem</p>
    <p>Ipsum</p>
    <p>Lorem</p>
    <p>Ipsum</p>
    <p>Lorem</p>
    <p>Ipsum</p>
        <p>Lorem</p>
    <p>Ipsum</p>
    </div>
    <div class="bottom">
     Some Text
    </div>

Answer:

Try this

$(window).one('scroll', function() {
    $('.title').text('Welcome');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<h1 class="title">Hello welcome </h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>