javascript - 将类添加到位置 :sticky but is adding class to every sticky element

Question

使用 position:sticky 将此代码添加到我的粘性元素

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 而不影响第二部分/其他部分，除非滚动

这是我的 FIDDLE

Answer 1

因为 $sticky 在您的例子中是一个包含两个元素的 jQuery 集合，您必须使用 .each() 循环分别检查每个元素。那么您可能不需要 $stickyTo，因为您必须检查每个“粘性”元素自己的 .parent()。像这样:

var $sticky = $('.grid-container .sticky'),


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

    const $stickyTo = $this.parent()
    const stickyToTop = $stickyTo.offset().top,
    const stickyToBottom = stickyToTop + $stickyTo.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');
    }
  })
});

请注意，此功能并未真正优化。最好在滚动期间使用 native javascript。或者甚至更好地检查 native CSS position: sticky .