スティッキーdivをポイントにする

Question

divを特定のdivにするときにdivを開始し、別のdivにヒットしたときにスティッキーを止めようとしていますが、divを開始した位置にとどまります。スティッキーdivが停止するdivの位置は、記事の長さによってはどこでもかまいません。私は1つの解像度で作業することができますが、他のものにはそれほど重視しません。

驚いたことに、ほとんどの場合固定されていますが、「停止中」の部分はほとんど機能しません（私のdivはちょうど高さが上がります）。私はそれがその後、素晴らしい作品私のラップトップの解像度に合うようにしようとしているコードで

$(document).scroll(function() { 
    var topOfLastDiv = ($("#scroll_to").position().top)-630; 
    var topOfFirstDiv = ($("#tour_user_info").position().top)+20; 
    var topOfLastDivSocial = topOfLastDiv+100; 
    var y = $(document).scrollTop(), 
     header = $("#tour_price_map"); 
     social_media = $('#social_media_sticky'); 

    if (y < topOfFirstDiv) { 
     header.css({position: "relative", "top" : "0px", "transform": "translateX(0)"}); 
     header.fadeIn(100); 
     social_media.fadeOut(100); 
    } 
    if(y >= topOfFirstDiv && y<topOfLastDiv) { 
     social_media.fadeIn(100); 
     header.css({position: "fixed", "top" : "50px", "transform": "translateX(216.2%)"}); 
    } 
    if (y >= topOfLastDiv && y < topOfLastDivSocial) { 
     header.css({position: "relative", "top" : topOfLastDiv-520, "transform": "translateX(0)"}); 
    } 
    if (y>= topOfLastDivSocial) { 
     social_media.fadeOut(100); 
     header.css({position: "relative", "top" : topOfLastDiv-520, "transform": "translateX(0)"}); 
    } 
}); 

乱数：

は、ここに私のコードです。

私はここで何が欠けていますか？

Answer 1

最後の2つのif節で "relative"ではなく "absolute"を使用して修正し、それに応じて "top"と "transform"を調整しました。