1

因此，我为我正在构建的网站在 div 上创建了一个小的视差滚动效果，但是我还希望能够更改 div 的填充以使效果更棒。

jQuery(document).ready(function() {
    jQuery(window).bind('scroll', function(e) {
        parallax();
    });
});

function parallax() {
    var scrollPosition = jQuery(window).scrollTop();
    jQuery('.bg-home').css('background-position','0 '+(0 - (scrollPosition * 0.2))+'px');
}

我想我需要按照这些思路做一些事情：

jQuery('.bg-home').css('padding', (scrollPosition - 0.2) +' 0');

不过，这是问题所在，当我查看页面顶部时，我希望顶部/底部填充为 75px .. 当我向下滚动时，我希望它慢慢变为 0.. 我该怎么做这样做？

4

1 回答 1

2

这需要一些数学来计算填充。我相信公式看起来像这样：

var padding = 75 - (( $(window).scrollTop() / ($(document).height() - $(window).height())) * 75);

并尝试解释：
$(document).height() - $(window).height()= scrollTop 的最大值
$(window).scrollTop / [max scrollTop]= 滚动百分比
[percentage scrolled] * 75= 不滚动时，我们得到 0，完全滚动时，我们得到 75
75 - [percentage scrolled * 75]= 不滚动时需要 75，完全滚动时需要 0，所以我们减去75

我没有测试它，所以随时问你是否卡住了。

于 2013-07-22T21:12:30.577 回答