Как сделать так, чтобы элемент исчезал при прокрутке - мой код работал где-то еще, но не здесь

Question

У меня есть целевая страница bootstrap с кодом, который я взял из другого проекта, чтобы скрыть панель навигации при прокрутке частично вниз по экрану и исчезнуть при прокрутке вверх. Он безупречно работал с элементом навигационной панели. В этом проекте я изменил контекст и пытаюсь заставить цель h2 исчезать при прокрутке вниз и обратно при прокрутке вверх.

Вот мой код:

function checkScroll() {
  if ($(window).scrollTop() >= 200) {
      $('.name-text').addClass('.my-name');
  } else {
      $('.name-text').removeClass('.my-name');
  }
}

.landing {  
  position: relative; 
  width: 100%; 
  height: 100vh; 
  z-index: -1;  
}

.home-wrap {   
  clip: rect(0, auto, auto, 0);  
  position: absolute; 
  height: 100%;
  width: 100%;
  top: 0;  
  left: 0;
}

.home-inner {
  background-image: url(/img/hero.jpg); 
  position: fixed;
  height: 100%; 
  width: 100%;
  background-size: cover;
  background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
  overflow: hidden; 
}

/* Caption - Landing Page */
.name-text {
    z-index: 13 !important;
    color: #75e3ff !important;
    text-shadow: .2rem .2rem .3rem #fff;
    opacity: 1;
    transition: 1s ease;
}

.my-name {
  color: #4caf4f00 !important;
  opacity: 0;
  transition: .2 ease;
}

.caption {
  z-index: 10;
  color: #fff;
  position: absolute; 
  top: 57%; 
  margin-left: 25%;
  margin-right: 20%;
  max-width: 100%;
}

.caption::before  {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  -webkit-box-shadow:inset 0 0 2000px rgba(0, 0, 0, 0.9);
  box-shadow: inset 0 0 2000px rgba(0, 0, 0, 0.9);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  background: inherit;
  border-radius: 5px;
  z-index: -1;
  overflow: hidden;
} 

.caption h1 {
  font-size: 4rem;
  text-shadow: .1rem .1rem .8rem #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="landing">
  <div class="home-wrap">
    <div class="home-inner">
      <div class="home-inner text-center text-light text-uppercase">
        <h2 class="text-center p-5 m-3 name-text">Text I want to fade out on Scroll</h2>
      </div>
    </div>
  </div>

  <!-- =============== Hero Text ==================== -->
  <div class="caption text-center text-light text-uppercase p-5">
    
    <h1 class="font-weight-light animate__animated animate__bounceInUp animate__fast">Portfolio</h1>

    <h3 class="animate__animated animate__bounceInUp">Here you will find a wee bit o' info on me & my projects</h3>

  </div>
  
</section>

<div>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate blanditiis excepturi, expedita aliquam at quod dolores soluta sunt mollitia temporibus ipsum nesciunt, laudantium eos minima voluptatum. Aspernatur nesciunt consectetur nisi dolorem laudantium! Dignissimos, odit, nam ratione soluta hic inventore impedit obcaecati sed repellendus similique architecto quidem rem deserunt, consequatur assumenda eligendi. Excepturi dolor eaque praesentium cum enim quo suscipit, temporibus molestias ab nemo. Officiis aperiam facilis exercitationem iusto ab culpa expedita totam est, sequi rem tempore laboriosam velit id vero dolores aspernatur quae delectus labore, molestiae quasi eaque deserunt. Maiores corporis ratione consequatur placeat omnis. Nemo modi rerum ducimus asperiores.
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptate blanditiis excepturi, expedita aliquam at quod dolores soluta sunt mollitia temporibus ipsum nesciunt, laudantium eos minima voluptatum. Aspernatur nesciunt consectetur nisi dolorem laudantium! Dignissimos, odit, nam ratione soluta hic inventore impedit obcaecati sed repellendus similique architecto quidem rem deserunt, consequatur assumenda eligendi. Excepturi dolor eaque praesentium cum enim quo suscipit, temporibus molestias ab nemo. Officiis aperiam facilis exercitationem iusto ab culpa expedita totam est, sequi rem tempore laboriosam velit id vero dolores aspernatur quae delectus labore, molestiae quasi eaque deserunt. Maiores corporis ratione consequatur placeat omnis. Nemo modi rerum ducimus asperiores.</div>

Answer 1

Вместо этого вам следует запустить функцию в окне:

$(window).scroll(function(event) {
  var scroll = $(window).scrollTop();
  if (scroll > 110) {
    $('.name-text').addClass('.my-name');
  } else {
    $('.name-text').removeClass('.my-name');
  }
});

Таким образом, код реагирует на прокрутку, ожидающую изменения позиции.