滚动时平移div

Question

我在div中有一个div。第一个div的高度未知。第二个的高度是125px。

我想让第二个成为一个粘性的div，它只在这个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，它可能会帮助您确定导致抖动的问题。