javascript - 当元素位于窗口顶部时添加类

Question

我正在尝试创建粘性标题，当您滚动到一个 div 时，头部状态变得固定并保持在 View 中，当 div 结束并滚动出 View 时，我希望标题成为绝对的并且留在其 parent 的底部。

我已经开始工作了，只是我在努力添加“绝对”类...

https://jsfiddle.net/yw313vf2/1/

function fixTitle() {
  $('.service-pane').each(function() {
    var $this = $(this);
    var offset = $this.offset().top;
    var scrollTop = $(window).scrollTop();

    if (scrollTop > offset) {
      $this.addClass('fixed');
    } else {
      $this.removeClass('fixed');
    }
  });
}

$(window).scroll(fixTitle);

Answer 1

所以我不得不在函数中运行另一个检查，看看当滚动时我的 div 的末尾是否到达窗口的顶部，如果是的话，添加一个额外的类...

function fixTitle() {
  $('.service-pane').each(function() {
     var $this = $(this);
     var offset = $this.offset().top - 50;
     var scrollTop = $(window).scrollTop();

  if (scrollTop > offset) {
      $this.addClass('fixed');
      if ($this[0].getBoundingClientRect().bottom < $('.manifesto').height() + 50) {
          $this.addClass('absolute');
      } else {
          $this.removeClass('absolute');
      }
  } else {
    $this.removeClass('fixed');
  }
});
}