Javascript 如何在滚动条上浮动元素，并延迟？

我有下面的div浮动，但我想作为左面板内的绿色元素有大约半秒的延迟

有人知道我该怎么做吗

这是浮动滚动条上元素的代码

$(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
            });
        })
    }); 

$（文档）.ready（函数（）{
var offset=$（'.ads'）.offset（）.top，top；
$（文档）.on（'scroll'，function（）{
top=$（窗口）.scrollTop（）

要使

.element

独立转换，需要将其移出

.left区域

元素

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

$（文档）.ready（函数（）{
变量偏移量=$（'.ads'）.offset（）.top，
顶部
$（文档）.on（'scroll'，函数（）{
top=$（窗口）.scrollTop（）

---

通过向元素添加一些过渡效果并使用一点延迟，我成功地获得了您所描述的效果，您应该能够调整

超时

、

边距顶部

和

过渡

值，以获得您想要的效果：

$(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'
            });
        });
    })
});

$（文档）.ready（函数（）{
var offset=$（'.ads'）.offset（）.top，top；
$（文档）.on（'scroll'，function（）{
top=$（窗口）.scrollTop（）

---

Fiddle:

因为元素是绝对定位的，所以我认为它不需要嵌套在div中。因此我更改了HTML：

<div class="left-zone ads">
  <div class="element"></div>
</div>

这允许对象完全独立于父对象进行操作，这也使它在处理时更加灵活

为了让动画继续下去，我不得不修改一些代码

在设置顶部变量的地方，我删除了结尾处的+'px'，以允许在每个动画中设置不同的值。这是必需的，因为元素必须将其最大值（在本例中为60px）添加到动画中，才能将其保持在正确的位置。然后，我复制了设置动画的代码，并为'element'div重复了它，并向其中添加了60px。如果这不合理，请查看下面的代码

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

如果您想看到JSFIDLE的实际应用，这里有一个JSFIDLE：

---

如果你有任何问题，请告诉我

您是否只想延迟一侧（左侧），而不是两侧？我想抓住

.element

，我想通过其父元素进行半秒的延迟左侧可能有10个元素，右侧可能有10个元素。我只创建了一个来理解我想要什么当你向上滚动时，你会看到元素跳到盒子的顶部，有什么办法吗？

.element{
position: absolute;
top: 60px;
left: -71px;
width: 20px;
height: 30px;
background: green;
}

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

.element{
  position: absolute;
  top: 60px;
  left: -71px;
  width: 20px;
  height: 30px;
  background: green;
  transition: top 1.3s;
}