视差部分的初始背景位置与滚动页面时不一致 [英] Parallax section initial background-position is not consistent with when the page is scrolled

问题描述

我花了整整一天的时间来尝试创建一个Parallax节，无论它在页面上的什么位置，它都可以正常工作，但是我对代码所做的每一个更改都解决了一个问题，并创建了另一个问题.到目前为止，这是我的代码:

I've spent my entire day trying to create a Parallax section that works fine no matter where it's placed on the page, but every change I make to the code solves one problem and creates another. Here is my code so far:

(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 .在这里，您会看到第一个视差部分跳到了上面代码设置的背景位置值，而第二个视差部分在页面下方运行良好.

Here is a jsfiddle on this. Here you'll see that the first parallax section jumps to the background position value set by the above code, while the second one down the page works fine.

我知道发生这种情况是因为上面的代码假定elOffset的值大于scrollTop，而第一个则不是.

I understand that this happens because the code above assumes that elOffset value is larger than scrollTop, which is not the case for the first one.

有人可以告诉我如何设置背景位置的初始值，以免发生这种跳跃.

Can someone please tell me how I can I set initial value of the background-position, so that this jump doesn't happen.

谢谢.

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

Update: Added content above the first Parallax section to show the jump correctly.

推荐答案

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

All you really need to do to make sure that there is no jump, is to make sure you set the initial value the same way that you set it on scroll.

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

The best way to do this is to move your code into a function, outside of the scroll handler, and then call that function in the scroll handler instead. Then, you can also call that function any other time you might want.. like on page load.

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

Here's what I changed your code to:

(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
    });
}

请参见演示

基本上，updateBackground()函数完成滚动事件之前所做的所有工作.现在，在滚动状态下，我只需调用该函数，然后将其传递给它所需的信息即可.

See Demo

Basically, the updateBackground() function does all the work that the scroll event was doing before. Now, on scroll, I simply call that function, and pass it the information that it needs.

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

Beneath that, I also immediately call the function, this way it will run on page load as well.

(请注意，我也将speed变量移到了.each()之外，这既可以使新函数更容易引用它，也因为不需要一遍又一遍地设置它..总是一样的，我们只需要声明一次即可.)

(note that I also moved the speed variable outside of the .each(), both so that it can be referenced more easily by the new function, and also because it doesn't need to get set over and over again.. it's always the same, we only really need to declare it once.)

这篇关于视差部分的初始背景位置与滚动页面时不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！