jquery - 视差部分初始背景位置与页面滚动时不一致

Question

我花了一整天的时间尝试创建一个视差部分，无论它放在页面上的哪个位置，它都能正常工作，但我对代码所做的每一次更改都会解决一个问题并产生另一个问题。这是到目前为止我的代码:

(function( $ ) {
  "use strict";
    $('.parallax-section').each(function(){
        var $el = $(this),
            speed = 0.4,
            elOffset = $el.offset().top;

        $(window).scroll(function() {
          var diff = $(window).scrollTop() - elOffset;
          var yPos = -(diff*speed);

          var coords = '50% '+ yPos + 'px';
          $el.css({ backgroundPosition: coords });
        });
    });
}(jQuery));

CSS:

.parallax-section{
    background-position: 50% auto;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-image: url('http://lorempixel.com/1400/700')
}

这是一个jsfiddle关于这一点。在这里您会看到第一个视差部分跳转到上面代码设置的背景位置值，而页面下方的第二个视差部分工作正常。

我知道发生这种情况是因为上面的代码假设 elOffset 值大于scrollTop，而第一个代码的情况并非如此。

有人可以告诉我如何设置背景位置的初始值，这样就不会发生这种跳转。

谢谢。

更新:在第一个视差部分上方添加内容以正确显示跳转。

Answer 1

要确保没有跳转，您真正需要做的就是确保以与滚动设置相同的方式设置初始值。

执行此操作的最佳方法是将代码移至滚动处理程序外部的函数中，然后在滚动处理程序中调用该函数。然后，您还可以在您需要的任何其他时间调用该函数......例如在页面加载时。

这是我将您的代码更改为:

(function ($) {
    "use strict";

    $('.parallax-section').each(function () {

        var $el = $(this);

        $(window).scroll(function () {
            updateBackground($el);
        });
        updateBackground($el);
    });

}(jQuery));

var speed = 0.4;

function updateBackground($el) {

    var diff = $(window).scrollTop() - $el.offset().top;
    var yPos = -(diff * speed);

    var coords = '50% ' + yPos + 'px';

    $el.css({
        backgroundPosition: coords
    });
}

See Demo

基本上，updateBackground() 函数完成了滚动事件之前所做的所有工作。现在，在滚动时，我只需调用该函数，并向其传递所需的信息。

在此之下，我还立即调用该函数，这样它也将在页面加载时运行。

(请注意，我还将 speed 变量移到了 .each() 之外，这样新函数就可以更轻松地引用它，而且因为它不需要一遍又一遍地设置..它总是相同的，我们只需要声明一次。)