Question

我正在尝试在用户滚动内容时添加一个浮动div，它几乎可以工作，但在动画上得到一点延迟，我需要浮动div应该在scrollTop到达浮动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

您可以更改的两个问题：

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

＆＃13;

 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)"});        
    }    
});

＆＃13;

see the fiddle link here

浮动div毫不拖延

1 个答案: