javascript - 无延迟 float div

Question

我试图在用户滚动内容时添加一个 float div，它几乎可以工作，但动画上几乎没有延迟，我需要当scrollTop到达 float div时 float 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

Answer 1

您可以更改的两个问题:

1. 使用 JavaScript 来制作 DOM 动画通常很慢。将动画函数更改为 CSS:transform:translateY()
2. 从滚动功能之外的 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