将类添加到position：sticky，但正在将类添加到每个粘性元素

Question

使用位置：粘性将该代码添加到我的粘性元素中>

var $sticky = $('.grid-container .sticky'),
  $stickyTo = $('.grid-container .stickyTo'),
  stickyToTop = $stickyTo.offset().top,
  stickyToBottom = stickyToTop + $stickyTo.outerHeight();

$(window).on('scroll', function() {
  var scroll = $(window).scrollTop(),
    stickyTop = $sticky.offset().top,
    stickyBottom = $sticky.offset().top + $sticky.outerHeight();

  if (stickyBottom >= stickyToBottom) {
    if (scroll < stickyTop) {
      //$sticky.addClass('fixed').removeClass('abs');
    } else {
      //$sticky.addClass('abs');
    }
  } else if (scroll > stickyToTop) {
    $sticky.addClass('stuck');
  } else if (scroll < stickyToTop) {
    $sticky.removeClass('stuck');
  }
});
并且我有两个粘性元素，请参见图像，但是当我滚动到第一部分时，它在第二部分上添加了一个“粘滞”类，如何使该jquery只在该部分上触发而不影响第二/其他部分，除非滚动

将此代码添加到我的粘性元素中，使用position：sticky var $ sticky = $（'。grid-container .sticky'），$ stickyTo = $（'。grid-container .stickyTo'），stickyToTop = $ stickyTo.offset （）.top，...

Answer 1

因为在您的情况下$sticky是一个包含两个元素的jQuery集合，所以您必须使用.each()循环分别检查每个元素。然后，您可能不需要$stickyTo，因为您必须检查每个“粘性”元素自己的.parent()。像这样的东西：