Übersetzen div auf Scroll

Question

Ich habe ein div in einem div. Das erste Div hat eine unbekannte Höhe. Der zweite hat die Höhe von 125px.

Ich möchte die zweite eine klebrige div machen, die nur in diesem div klebrig ist.

Die graue Box ist der Container und das Social-Media-Div daneben sollte klebrig sein.

Nach dem Behälter mehr Inhalt wird kommen, so kann ich nicht position: fixed verwenden. Ich habe versucht, position: absolute zu verwenden und den top Wert oder transform: translate zu ändern, aber wenn ich tue, dass Chrome herum jittert.

-Code, die ich versucht zu nutzen:

$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

Da die jsbin Sie die Lösung ohne Flackern arbeitet vorgesehen zeigt, das Problem in den durch andere Elemente Ihrer Website ausgelöst repaints liegen könnte, nicht der Code, den Sie eingefügt . Werfen Sie einen Blick auf die Google's repaint optimization guidelines, es könnte Ihnen helfen, die Probleme zu identifizieren, die das Zittern verursachen.