通过其ScrollTop位置后删除类

Question

所以我想要实现的是删除我通过其scrollTop位置后添加的类，并在从下面向上滚动时将其添加回来。

所以我把h1元素显示在滚动上但我想删除它一旦它离开了视图端口，让我们说你想要回来，你会得到一个动画，就像你得到的一样当你最初从上往下滚动但这次是从下往上滚动。

$(function() {

  $(window).scroll(function() {
    var wScroll = $(this).scrollTop();

    if (wScroll > $('h1').offset().top - 300) {
      $('h1').addClass('opacity');
    } else {
      $('h1').removeClass('opacity');
    }
  });

});

h1 {
  margin-top: 500px;
  margin-bottom: 1000px;
  transition: 1s all ease;
  position: relative;
  left: 0;
  opacity: 0;
}

.opacity {
  opacity: 1;
  color: red;
  position: relative;
  left: 200px;
  transition: 1s all ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Test</h1>

Answer 1

你只需要处理后滚动检查：

$(function() {
  
$(window).scroll(function() {
var wScroll = $(this).scrollTop();
var hpos = $('h1').offset().top;
if (wScroll === hpos -300 ) {
  $('h1').addClass('opacity');
} else if (wScroll < hpos - 300) {
  $('h1').removeClass('opacity');
}
else if (wScroll < hpos - 300) {
  $('h1').removeClass('opacity');
}
else if (wScroll > hpos ) {
  $('h1').removeClass('opacity');
}
else {
  $('h1').addClass('opacity');
}
});
  
});

h1 {
margin-top: 500px;
margin-bottom: 1000px;
transition: 1s all ease;
position: relative;
left: 0;
opacity: 0;
}

.opacity {
opacity: 1;
color: red;
position: relative;
left: 200px;
transition: 1s all ease;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<h1>Test</h1>

Answer 2

如果你需要从短途解决它，试试这个。也许你需要校准它。我没有尝试全屏。

    $(function() {

      $(window).scroll(function() {
      var wScroll = $(this).scrollTop();

      if (wScroll > $('h1').offset().top - 300 
      && wScroll < $('h1').offset().top + 300) {
      $('h1').addClass('opacity');
      }
      else {
        $('h1').removeClass('opacity');
      }

      });

     });