如何在滚动时浮动元素，延迟？

Question

我有以下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 
      }); 
     }) 
    }); 

Answer 1

我设法得到的东西像你描述了通过添加一些过渡效果的元素，并使用一点点延迟工作，你应该能够调整的timeout，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/

Answer 2

的元素，使该.element独立过渡的代码，你需要把它搬出.left-zone元素。

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

Working Fiddle

Answer 3

由于元素是绝对定位的，我认为它不需要嵌套在div中。因此我改变从这个HTML：

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

这样：

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

我然后调节的CSS的元件定位在相同的位置，因为它是，像这样：

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

这允许对象完全独立地操作到父对象，这也使得它可以更灵活地使用它。

为了让动画怎么回事，我不得不改变代码的数位。

你在哪里设置顶级变量，我删除了+“PX”末，以允许不同值的每个动画的设定。这是必需的，因为该元素必须具有最高值（在此情况下为60px），才能将其保留在正确的位置。然后，我复制设置动画的代码并将其重复用于“元素”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' 
     }); 
    }) 

接下来是得到延迟。我第一次尝试jQuery的.delay功能，但它似乎没有工作，所以我做了一个更简单的更改，添加从'广告'div到'元素'div的CSS的转换线，并将持续时间改为半秒。这达到了事后要求的效果！下面是代码：

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

这里是一个的jsfiddle，如果你想看到它在行动：https://jsfiddle.net/hdn1oyjd/

让我知道如果您有任何问题！