javascript - 无延迟 float div

我正在尝试在用户滚动内容时添加一个浮动div，它几乎可以正常工作，但是在动画上的延迟很小，我需要在scrollTop到达浮动div时，浮动div应该与滚动一起进行动画处理

var $scrollingDiv = $("#scrollingDiv");

$(window).scroll(function(){
    var y = $(this).scrollTop(),
        maxY = $('#footer').offset().top,
        scrollHeight = $scrollingDiv.height();
    if(y< maxY-scrollHeight ){
        $scrollingDiv
        .stop()
        .animate({"marginTop": ($(window).scrollTop()) + "px"}, "fast" );
    }
});

Fiddle link

最佳答案

您可以更改两个问题：


使用JavaScript为DOM制作动画通常很慢。
将animate函数更改为CSS：transform：translateY（）
从滚动功能之外的DOM中选择项目，因此只能完成
一旦。

 var $scrollingDiv = $("#scrollingDiv");
 var $footer = $('#footer');
 var $window = $(window);

$(window).scroll(function(){
    var y = $(this).scrollTop(),
        maxY = $footer.offset().top,
        scrollHeight = $scrollingDiv.height();
    if(y< maxY-scrollHeight ){
        $scrollingDiv
        .css({"transform": "translateY(" + ($window.scrollTop()) + "px)"});
    }
});

see the fiddle link here