javascript - How can I float an element on scroll, with delay? -

i have following div floating want green element inside left panel have delay half second.

does idea how can this?

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

this code floating elements on 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             });         })     });  

i managed describe working adding transition effects element , using little delay, should able tweak timeout, margin-top , transition values 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/