javascript - 滚动 div 时延迟动画

Question

我有一个 div，当我滚动时它是 float 的。但是在这个 div 中我还有其他 div，我希望这些 div 比父 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; 
}

并使用您的自定义动画更改滚动。