jquery - 将 div 动画化到滚动顶部(作为视差)

Question

我在图像中堆叠了不同颜色的 div，每个 div 的高度为窗口高度的 40%，但在顶部位置设置为负值，因此产生了堆叠 div 的错觉.

我想要的是在滚动时为这些 div 设置动画，即我想在滚动时显示底部的 div 并将其滚动到具有固定高度的容器 div(设置为窗口的高度)就像视差效果一样。

我怎样才能做到这一点？

到目前为止我所做的是:

var position = $('.panel-wrapper').scrollTop();
$('.panel-wrapper').bind('mousewheel DOMMouseScroll', function (e) {
//alert('here');

var scroll = $('.panel-wrapper').scrollTop();
//console.log(scroll);
if (scroll > position) {
    // console.log(parseInt($('.branding-panel').position().top) + parseInt($('.branding-panel').outerHeight(true)));
    // console.log(parseInt(panel_top_position[0]) + parseInt(50));
    if (((parseInt($('.branding-panel').position().top) + parseInt($('.branding-panel').outerHeight(true))) >= (parseInt(panel_top_position[0]) + parseInt(50)))) {
        $('.branding-panel').css('top', parseInt($('.branding-panel').css('top')) - parseInt(100));
    }
    else if (((parseInt($('.advertising-panel').position().top) + parseInt($('.advertising-panel').outerHeight(true))) >= (parseInt(panel_top_position[1]) + parseInt(50)))) {
        $('.advertising-panel').css('top', parseInt($('.advertising-panel').css('top')) - parseInt(200));
    }
    else if (((parseInt($('.interactive-panel').position().top) + parseInt($('.interactive-panel').outerHeight(true))) >= (parseInt(panel_top_position[2]) + parseInt(50)))) {
        $('.interactive-panel').css('top', parseInt($('.interactive-panel').css('top')) - parseInt(300));
    }
    else if (((parseInt($('.films-panel').position().top) + parseInt($('.films-panel').outerHeight(true))) >= (parseInt(panel_top_position[3]) + parseInt(50)))) {
        $('.films-panel').css('top', parseInt($('.films-panel').css('top')) - parseInt(320));
    }

}
else {

}
position = scroll;

});

注意 - 我的窗口高度固定，我想滚动它并显示其他 div。

请帮忙。

克鲁纳尔

Answer 1

您的代码工作正常，但您需要不同的方法来向下滚动和向上滚动，这可能不是一个完美的解决方案，但试试这个， fiddle 链接 https://jsfiddle.net/kq6ko00r/7/

注意*调整重置功能中的值以进行微调。

   function reset() {
  el[0].css({
    top: 0
  });
  el[1].css({
    top: -80
  });
  el[2].css({
    top: -150
  });
  el[3].css({
    top: -230
  });
  el[4].css({
    top: -300
  });
  el[5].css({
    top: -380
  });

};

希望这有帮助..:)