Question

我有一个div，当我滚动时，它是浮动的。但是在这个div中我还有其他div，我希望这些div比父div更晚出来。

HTML

<uap:ApplicationContentUriRules>
   <uap:Rule Type="include" Match ="ms-appx-web:///" WindowsRuntimeAccess="all"/>
</uap:ApplicationContentUriRules>

JS

<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>

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

我认为SIMPLEST会是这样的： 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>

滚动div时延迟动画

2 个答案: