スクロールでdivを翻訳する

Question

divにdivがあります。 最初のdivの高さは不明です。 2番目の高さは125pxです。

私はこのdivに付箋のみであるスティッキーdivを作りたいと思います。

灰色のボックスはコンテナで、隣にあるソーシャルメディアのdivはスティッキーである必要があります。

コンテナより多くのコンテンツが来るので、私はposition: fixedを使用傾ける後。私はposition: absoluteを使用して、topの値またはtransform: translateを変更しようとしましたが、私はその時にクロムがジッタをかいています。

私が使用しようとしたコード：

$offset = $(".social-media").offset().top; 
$containerHeight = $(".sticky-container").height(); 
$bottom = $containerHeight + $(".sticky-container").offset().top; 
$maxPoint = $containerHeight - $(".social-media").height(); 
$(window).scroll(function(){ 
    if($(window).scrollTop() >= $offset){ 
     if($(window).scrollTop() >= $bottom){ 
      $(".social-media").css({transform: "translate(0px,"+$maxPoint+"px)"}); 
     }else{ 
      $scroll = $(window).scrollTop() - $offset; 
      $(".social-media").css({transform: "translate(0px,"+$scroll+"px)"}); 
     } 
    }else{ 
     $(".social-media").css({transform: "translate(0px,0px)"}); 
    } 
}); 

Answer 1

あなたが提供jsbinは、ソリューションがジッターなしで動作を示しているので、問題はあなたのサイトの他の要素によってトリガ再描画にあるかもしれない、ではないあなたが貼り付けコード。 Google's repaint optimization guidelinesを見ると、ジッタの原因となる問題を特定するのに役立ちます。