在滚动

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，它可以帮助您找出导致抖动的问题。