Как изменить название сайта при прокрутке

Question

Я хочу изменить заголовок сайта h1 (.site-h1) на другой текст при прокрутке вниз с помощью jquery. Например, «мой сайт» меняет «приветствие» при прокрутке.

////////////////////////////////// ////////////////////////////////////////////////// ////////////////////////////////////////////////// ////////////////////////////////////////////////// ////////////////////////////////////////////////// //////////////////////////

<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;
}

Answer 1

Попробуйте это

$(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>

Answer 2

При прокрутке я предполагаю, что вы имеете в виду весь документ. Для этого мы используем метод jQuery scroll . Но вы можете заметить, что для оптимизации я использую jQuery One , чтобы скрипт не запускал событие много раз при каждом крошечном изменении прокрутки.

$(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>