滚动时将div设置为top（作为视差）

Question

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

我想要的是在滚动时设置这些div的动画，即我想在滚动时显示底部div，并使用固定高度的容器div将其滚动到大范围（设置为窗口的height就像视差效果一样。

我怎样才能做到这一点？

到目前为止，我所做的是：

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。

请帮忙。

Krunal

Answer 1

你的代码工作正常，但你需要不同的向下滚动和向上滚动的方法，这可能不是一个完美的解决方案，但试试这个，小提琴链接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
  });

};

希望这会有所帮助.. :)

Answer 2

看看这段代码，它比你的代码简单得多 https://jsfiddle.net/qartal_tr/h67kpaqc/1/

.Panel{
  position:relative;
  height:300px;
  margin-bottom:-150px;
  box-shadow:0px 4px 8px rgba(0, 0, 0, 0.15);
  transition:all .5s ease-out;
  top:0px;
}

<div class="Panel" style="background-color:red">
</div>
<div class="Panel" style="background-color:green">
</div>
<div class="Panel" style="background-color:purple">
</div>
<div class="Panel" style="background-color:yellow">
</div>
<div class="Panel" style="background-color:lightblue">
</div>
<div class="Panel" style="background-color:darkgreen">
</div>

$(document).ready(function(){
  var Z = 10000;
  $(".Panel").each(function(){
    $(this).css("z-index", Z--);
  });

  $(window).scroll(function(e){
    $(".Panel").each(function(){
        var ScrollHeight = $(this).offset().top - $(window).scrollTop();
        if(ScrollHeight < 0 && $(this).css("top") == "0px")
          $(this).css("top", "-150px");
        else if(ScrollHeight >= -150 && $(this).css("top") == "-150px")
          $(this).css("top", "0px");
    });
  });
});