Задержка анимации при прокрутке div

Question

У меня есть div, который, когда я прокручиваю, плавает. Но внутри этого div у меня есть другие divs, и я хочу, чтобы эти divs приходили бит позже, чем родительский div.

HTML

<div class="left-zone col-sm-2"> 
    <div class="bag"></div> 
    <div class="makeup"></div> 
    <div class="karate"></div> 
    <div class="scooter"></div> 
    <div class="shoe"></div> 
    <div class="armbands"></div> 
    <div class="googles"></div> 
</div> 

JS

(function($) { 
    var element = $('.left-zone'), 
      originalY = element.offset().top; 
    var topMargin = 50; 
    element.css('position', 'relative'); 
    $(window).on('scroll', function(event) { 
     var scrollTop = $(window).scrollTop(); 
     element.stop(false, false).animate({ 
        top: scrollTop < originalY 
        ? 0 
        : scrollTop - originalY + topMargin 
     }); 
    }); 
})(jQuery); 

Answer 1

вы можете остановить прокрутку с функцией вызова "disableScroll" и включить с "enableScroll" повторно.

function preventDefault(e) { 
e = e || window.event; 
if (e.preventDefault) 
e.preventDefault(); 
e.returnValue = false; 
} 

function disableScroll() 
window.addEventListener('DOMMouseScroll', preventDefault, false); 
window.onwheel = preventDefault; // modern standard 
window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE 
window.ontouchmove = preventDefault; // mobile 
} 

function enableScroll() { 
if (window.removeEventListener) 
    window.removeEventListener('DOMMouseScroll', preventDefault, false); 
window.onmousewheel = document.onmousewheel = null; 
window.onwheel = null; 
window.ontouchmove = null; 
} 

и изменение прокрутки с помощью пользовательской анимации.

Answer 2

Я думаю, что ПРОСТЕЙШАЯ будет что-то вроде этого: JS Fiddle

var lZone = $('.left-zone'); 
 
$(window).on('scroll', function() { 
 
    lZone.css('margin-top', $(document).scrollTop() + 100); 
 
});

.left-zone { 
 
    position: absolute; 
 
    margin-top: 100px; 
 
    transition: all, 0.35s; 
 
} 
 

 
div > div { 
 
    width: 75px; 
 
    height: 75px; 
 
    border: 1px solid black; 
 
    margin: 5px; 
 
} 
 

 
.left-zone > div:first-child {background: #FF0} 
 
.left-zone > div:nth-child(2n+3) {background: #CCC} 
 

 
body { 
 
    height: 6000px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="left-zone col-sm-2"> 
 
    <div class="bag"></div> 
 
    <div class="makeup"></div> 
 
    <div class="karate"></div> 
 
    <div class="scooter"></div> 
 
    <div class="shoe"></div> 
 
    <div class="armbands"></div> 
 
    <div class="googles"></div> 
 
</div>