Question

所以我在我正在构建的网站上为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 ..怎么会我这样做了吗？

Answer 1

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

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减去

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

在div背景上创建视差效果，可以让它改变填充吗？

1 个答案: