當div滾動時延遲動畫

我有一個div，當我滾動時是浮動的。但在這個div裏面我有其他的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>

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

來源

2015-07-03 Markus Hayner

「這些div來晚一點位」 ......請解釋一下。我滾動時創建一個延遲 –

。所以箱子先來，然後裏面的元素來1秒後 –

小提琴在這裏https://jsfiddle.net/agefz5zh/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; 
}

和您的自定義動畫更改滾動。

來源

2015-07-03 16:08:12

我認爲最簡單的將是這樣的： 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>

來源

2015-07-03 18:11:25

當div滾動時延遲動畫

回答

相關問題