添加類元素時，在窗口

Question

我試圖創造粘頭，當你滾動到一個div頭狀態變成固定的頂部，並保持在視圖中，當DIV已經走到了盡頭，並滾動出來的觀點我希望標題然後變得絕對，並留在其父母的底部。

我已經得到了初步的部分唯一的工作我掙扎在其上添加「絕對」一流...

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