无延迟浮动div

Question

当用户滚动内容时，我试图添加一个浮动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" );        
    }    
});

小提琴连杆

Answer 1

您可以更改两个问题：

1. 使用JavaScript对DOM进行动画处理通常比较慢。将动画函数更改为CSS：转换：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)"});        
    }    
});