Question

我需要创建5个图层 - div。每层具有不同的高度，但它们之间的空间相同。例如：

Div 1
30px gap
Div 2
30px gap
Div 3
30px gap

我需要一些jQuery脚本来确定我的页面（正文标记）高度，当我顺利向下滚动更改顶部（对象将被绝对定位，它们需要重叠），或者它们的margin-top一个接一个。首先是第1层为50px，然后是第1层，2为50px，然后是第3层为50px ......在页面的末尾，它们将全部重叠20px（30px间隙+ 20px重叠）。所以我不想一次移动所有图层。

我希望这个解释已经足够了，我还没有任何脚本，有一些，但没有任何效果。为了更好的想象力，它是一个汉堡分为：顶级面包，沙拉，培根，肉，底部面包。它将出现在一个滚动网页的侧面。在顶部，它将被拆分，当用户向下滚动时，成分将重叠，在页面底部，它们将完成一个汉堡。

感谢您的帮助。

Answer 1

这会让你知道从哪里开始：

$(window).scroll(function(){
    var margin_max = 30;
    var join_at = 70;
    var margin = Math.floor( margin_max - ($(window).scrollTop() * margin_max / join_at) );
    if(margin < 0) margin = 0;
    $('.part').css('margin-bottom', margin);
});

演示： http://jsfiddle.net/L6DP5/1/

当然，您需要根据自己的需要进行一些修改

滚动jQuery时移动对象更近

1 个答案: