Jquery 如何在div scroll top上添加类并在div scroll out上删除类？

当div顶部在视口中可见时，我希望添加“opacity”类以列出项目，并在div离开视口时删除该类，反之亦然

这是钢笔

我对jquery不是很熟悉，所以可能会犯一些愚蠢的错误，但是，它是使用waypoint函数还是更像第二个选项？如有任何建议，将不胜感激。谢谢

$('.wrapperright').scroll(function () {
    if(y >= s_body.top && y < e_body.top){
        $('#generationanxiety').addClass('opacity');
    }
    else 
    {
        $('#generationanxiety').removeClass('opacity');
    }
});

$（'.wrapperright'）。滚动（函数（）{
如果（y>=s_body.top&&y

也许这

 var topofDiv = $("#generationanxiety").offset().top; //gets offset div
 var height = $("#generationanxiety").outerHeight(); //gets height of div

 $(window).scroll(function(){
     if($(window).scrollTop() > (topofDiv + height)){
       console.log('This is where the div bottom leaves the window.')
       $('#generationanxiety').removeClass('opacity');
       }
      else{
       $('#generationanxiety').addClass('opacity');
      }
});

为了平滑，添加以下附加CSS代码：

#WrapperDiv{
     -webkit-transition: all 0.5s ease;
     -moz-transition: all 0.5s ease;
     -o-transition: all 0.5s ease;
     transition: all 0.5s ease;
 }

---

到父div

使用

getBoundingClientRect（）

最容易检查项目是否在视口中。因此，我将其与图像周围

div

上的

data

属性结合使用，以便将它们与相应

li

项的

id

相匹配

01世代焦虑
02 Lekhenaporter.com
协商中的03个主体
04 glitter Boy化妆品
05 juice WRLD封面艺术

← 返回

这似乎不起作用，当div离开viewport时，它并没有删除类如果div滚动出viewport，它是否可见又有什么关系？有点像“如果一棵树倒在森林里，周围没有人，它还会发出声音吗？”当然，它会发出噪音，但没有人会在意，就像没有人会在意视口外是否有一个不可见的div一样。我的意思是，一旦div的底部离开视口，它就会触发一个函数，从一个div中删除类，并将该类添加到下一个div。我总是使用我为其制作的一个小throlling和debounce插件可能引发很多的事件。这将执行限制在设置的任何时间，仅每100ms执行一次。这是节流部分，最后的

true

意味着它也会触发并随后发生事件（去盎司）。您可能有兴趣将其用于优化。嘿，谢谢！这几乎是完美的工作，除了它的相反，我希望列表项是0.4不透明度，直到你正在查看相应的div。另一件事是，当你在两个div之间时，它会立即将不透明度类添加到两个列表项中，我想我修复了所有这些。在我编辑答案之前，您可以先看一下（也许您还有其他反馈）。一开始我很难完全理解这个问题。我认为唯一模棱两可的是当滚动到顶部图像时。

$(window).on('load', function() {

  var pouch = $('.wrapperright'),
  items = pouch.find('div'),
  gate, spot = {},
  zone = pouch.scrollTop(),
  haze = 'opacity';

  $(this).resize(collectInfo).resize();

  pouch.scroll(function() {

    items.each(function() {

      var aim = $('#' + $(this).data('target')),
      edges = this.getBoundingClientRect(),
      apex = Math.round(edges.top),
      nadir = Math.round(edges.bottom);

      if (apex < gate && nadir > 0) aim.removeClass(haze);
      else aim.addClass(haze);
    });

    var rise = $('.bio li').not('.' + haze),
    turf = pouch.scrollTop();

    if (rise.length > 1) {
      if (turf > zone) rise.eq(0).addClass(haze);
      else rise.eq(1).addClass(haze);
    }

    zone = turf;
  });

  $('.bio li').click(function() {

    if (zone == spot[this.id]) return;

    pouch.stop().animate({scrollTop: spot[this.id]}, 1500);
  });

function collectInfo() {

  gate = $(this).height();

  items.each(function() {

    spot[$(this).data('target')] = Math.round($(this).position().top+zone);
  });
}
});