我如何让一个元素在Scroll上淡出-我的代码在其他地方工作，但在这里不工作

Question

我有一个引导程序登录页，其中包含我从另一个项目中获得的代码，用于在屏幕向下滚动时淡出导航栏&滚动到顶部时淡入。它在导航栏元素上完美地工作。在这个项目中，我改变了上下文，并试图让target在向下滚动时淡出，在滚动到顶部时返回。

这是我的代码：

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

通过这种方式，代码对监听位置变化的滚动做出反应。