Question

我试图创建粘性标题，当你滚动到div时，头部状态变得固定并保持在视图中，当div结束并滚动出视图时我希望标题变为绝对的，并保持在其父母的底部。

我已经完成了最初的工作，我只是努力添加绝对的＆＃39;类...

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');
  }
});
}

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

1 个答案: