javascript – 如何在滚动上浮动一个元素,有延迟？

我有以下div漂浮,但我希望左面板内的绿色元素延迟大约半秒.

有谁知道我怎么能这样做？

https://jsfiddle.net/eoopvgmc/22/

这是将元素浮动在滚动上的代码

$(document).ready(function() {
        var offset = $('.ads').offset().top, top;
        $(document).on('scroll', function() {
            top = $(window).scrollTop() < offset ? '0' : $(window).scrollTop() - offset + 'px';
            $('.ads').css({
                'top': top
            });
        })
    }); 

解决方法:

我设法通过向元素添加一些过渡效果并使用一点延迟来获得类似于您所描述的工作,您应该能够调整超时,margin-top和transition值以获得您想要的内容：

$(document).ready(function() {
    var offset = $('.ads').offset().top, top;
    $(document).on('scroll', function() {
        top = $(window).scrollTop() < offset ? '0' : $(window).scrollTop() - offset + 'px';
        $('.ads .element').css({
            'transition': 'none',
            'margin-top': '-60px'
        });
        $('.ads').css({
            'top': top
        });
        setTimeout(function() {
            $('.ads .element').css({
                'transition': 'margin-top 3s',
                'margin-top': '0'
            });
        });
    })
});

小提琴：https://jsfiddle.net/yckszc16/