要素がウィンドウの一番上にあるときにクラスを追加する

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