How can I put an element on a delayed scroll?
I have the following div, but I want the green element inside the left pane to have a delay of about half a second.
Does anyone know how I can do this?
https://jsfiddle.net/eoopvgmc/22/
This is the code that floats elements in a scroll
$(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
});
})
});
source to share
I was able to get something similar to what you are describing by adding some transition effects to the element and using a little delay, you should be able to change the values timeout
, margin-top
and transition
to get exactly what you want:
$(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'
});
});
})
});
Fiddle: https://jsfiddle.net/yckszc16/
source to share
To make an independent transition .element
, you need to infer it from the 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
});
})
});
source to share
Since the element is absolute, I realized that it doesn't need to be embedded in a div. So I changed the HTML from this:
<div class="left-zone ads">
<div class="element"></div>
</div>
:
<div class="left-zone ads"></div>
<div class="element"></div>
Then I adjusted the css to position the element in the same place as it:
.element{
position: absolute;
top: 60px;
left: -71px;
width: 20px;
height: 30px;
background: green;
}
This allows you to completely manipulate the object with the parent, which also makes it more flexible in what you can do with it.
To get the animation, I had to change a few bits of code.
When you set the top variable, I removed the + 'px' at the end to allow different values to be set in each animation. This is necessary because the element must have its top value (60px in this case) added to the animation to keep it in the correct position. Then I copied the code that sets the animation and repeated it for the 'element' div, and added 60px to it. if that doesn't make sense then check the code below.
$(document).on('scroll', function() {
top = $(window).scrollTop() < offset ? '0' : $(window).scrollTop() - offset;
$('.ads').css({
'top': top + 'px'
});
$('.element').css({
'top': top + 60 + 'px'
});
})
Next, you need to get the delay. I tried the jQuery.delay function first, but it didn't seem to work, so I made an even simpler change by adding a transition line from your declaration div to the css div and changing the duration half a second longer.This provides the desired effect from it coming! Here is the code:
.element{
position: absolute;
top: 60px;
left: -71px;
width: 20px;
height: 30px;
background: green;
transition: top 1.3s;
}
Here's a jsfiddle if you'd like to see it in action: https://jsfiddle.net/hdn1oyjd/
Let me know if you have any questions!
source to share