Question

我的结构分为4个部分。在其中一个部分中，我在父div中有3个div。我给父div赋予了高度，这样一次只能看到一个内部div。

现在当我滚动时，我想让可见的div向上滑动，然后下一个div进入可见位置。所以基本上在滚动三次内我应该能够看到父div中的所有3个div。

我希望每个div都有动画效果。例如：当我滚动时，可见div应向上滑动，下一个div应同时滑动到该位置。

<div class="col-xs-6" id="scroll">
     <div class="left">
           <div id="div1"></div>
           <div id="div2"></div>
           <div id="div3"></div>
     </div>
</div>

Answer 1

请参阅此示例：http://jsfiddle.net/kevalbhatt18/6j0c7bfo/

$(window).on('DOMMouseScroll', function (e) {
    alert('1')
}).on('mousewheel', function (e) {
    if ($(e.target).prev()[0] !== undefined) {
        $('#' + $(e.target)[0].id).animate({
            height: '0px',
            opacity: 0.25,
        }, 1000, function () {
            // Animation complete.
        });
    } else {
       $('#' + $(e.target)[0].id).animate({
            height: '0px',
            opacity: 0.25,
        }, 1000, function () {
          $('div[role="scroll"]').height('100px')
          $('div[role="scroll"]').css('opacity','')
        });
    }
});

Answer 2

那里有很多方便的jQuery插件来管理滚动事件/效果。这是我喜欢的一个：

Superscrollorama

他们在他们的网站上展示插件，看起来像你可以利用的东西。如果向下滚动传递所有效果，它们也有一个文档。

如果这个插件不适合你，那就像我提到的那样，很多。以下是六个列表：http://webdesignledger.com/tools/6-jquery-plugins-for-scrolling-effects

如果您需要更多帮助，请与我们联系。希望这能帮到你！

垂直滚动多个div

2 个答案: