如何更改视差滚动的方向？答案

【问题标题】：How can I change the direction of scrolling in parallax?如何更改视差滚动的方向？
【发布时间】：2015-05-28 18:26:11
【问题描述】：

我昨天在代码中更改了一些内容，现在视差图片向相反方向滚动。我经历了我的 git 提交，但似乎无法弄清楚为什么图像朝错误的方向移动。我正在使用 jquery.parallax-1.1.3。

jQuery 插件：

/*
Plugin: jQuery Parallax
Version 1.1.3
Author: Ian Lunn
Twitter: @IanLunn
Author URL: http://www.ianlunn.co.uk/
Plugin URL: http://www.ianlunn.co.uk/plugins/jquery-parallax/

Dual licensed under the MIT and GPL licenses:
http://www.opensource.org/licenses/mit-license.php
http://www.gnu.org/licenses/gpl.html
*/

(function( $ ){
    var $window = $(window);
    var windowHeight = $window.height();

    $window.resize(function () {
        windowHeight = $window.height();
    });

    $.fn.parallax = function(xpos, speedFactor, outerHeight) {
        var $this = $(this);
        var getHeight;
        var firstTop;
        var paddingTop = 0;

        //get the starting position of each element to have parallax applied to it
        $this.each(function(){
            firstTop = $this.offset().top;
        });

        if (outerHeight) {
            getHeight = function(jqo) {
                return jqo.outerHeight(true);
            };
        } else {
            getHeight = function(jqo) {
                return jqo.height();
            };
        }

        // setup defaults if arguments aren't specified
        if (arguments.length < 1 || xpos === null) xpos = "50%";
        if (arguments.length < 2 || speedFactor === null) speedFactor = 0.1;
        if (arguments.length < 3 || outerHeight === null) outerHeight = true;

        // function to be called whenever the window is scrolled or resized
        function update(){
            var pos = $window.scrollTop();

            $this.each(function(){
                var $element = $(this);
                var top = $element.offset().top;
                var height = getHeight($element);

                // Check if totally above or totally below viewport
                if (top + height < pos || top > pos + windowHeight) {
                    return;
                }

                $this.css('backgroundPosition', xpos + " " + Math.round((firstTop - pos) * speedFactor) + "px");
            });
        }

        $window.bind('scroll', update).resize(update);
        update();
    };
})(jQuery);

我的实现：

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
  $('#home').css({'background-attachment': 'scroll'});
} else {
  $('#home').parallax('50%', 0.1);
}

【问题讨论】：

如果我们看不到您的代码，我们怎么知道呢？
好点。由于该插件是开源的并且广受欢迎，我认为人们已经熟悉它了。我将其编辑到上面的答案中。
不是库中的代码，而是您实现它的代码。
我把它编辑成上面的问题。

标签： javascript jquery jquery-plugins parallax

【解决方案1】：

找到了解决办法。正如我所怀疑的那样，问题出在样式表中。将此添加到我的样式表中：

#home {
  background-color: #222;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  -webkit-background-size: cover;
     -moz-background-size: cover;
     -o-background-size: cover;
      background-size: cover;
  padding: 0;
}

【讨论】：