스크롤 할 때 div를

Question

div에 div가 있습니다. 첫 번째 div의 높이를 알 수 없습니다. 두 번째 높이는 125px입니다.

저는이 div에서 끈적 끈적한 div를 만들고 싶습니다.

회색 상자는 컨테이너이고 그 옆에있는 소셜 미디어 사업부는 끈적해야합니다. 더 많은 콘텐츠가 올 것이다 컨테이너 후

, 그래서 position: fixed를 사용하지 못할. position: absolute을 사용하고 top 값 또는 transform: translate을 변경하려고 시도했지만 Chrome을 사용하면 지터가 발생합니다. 내가 시도

코드 사용 :

$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을 살펴보면 지터가 발생하는 문제를 파악하는 데 도움이 될 수 있습니다.