javascript - 通过 css 和 javascript 的背景图像的 y 位置问题

Question

我根据找到的教程实现了视差滚动效果。效果很好。但是，当我指定背景图像时，我无法控制 y(垂直)轴。这会导致问题，因为我试图在多个分层图像上设置位置。

对导致问题的原因有什么想法吗？

这是一个外部脚本:

$(document).ready(function(){
$('#nav').localScroll(800);

//.parallax(xPosition, speedFactor, outerHeight) options:
//xPosition - Horizontal position of the element
//inertia - speed to move relative to vertical scroll. Example: 0.1 is one tenth the speed of scrolling, 2 is twice the speed of scrolling
//outerHeight (true/false) - Whether or not jQuery should use it's outerHeight option to determine when a section is in the viewport
$('#mainimagewrapper').parallax("50%", 1.3);
$('#secondaryimagewrapper').parallax("50%", 0.5);
$('.image2').parallax("50%", -0.1);
$('#aboutwrapper').parallax("50%", 1.7);
$('.image4').parallax("50%", 1.5);

})

这是另一个外部脚本:

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

这是一个部分的 CSS:

#aboutwrapper {
background-image: url(../images/polaroid.png);
background-position: 50% 0;
background-repeat: no-repeat;
background-attachment: fixed;
color: white;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}

#aboutwrapper .image4 {
background: url(../images/polaroid2.png) 50% 0 no-repeat fixed;
height: 500px;
width: 100%;
margin: 0 auto;
padding: 0;
}

.image3{
margin: 0 auto;
min-width: 970px;
overflow: auto;
width: 970px; 
}

这两个都被调用来实现视差滚动。我真的只想更具体地控制背景图像的位置。我试过弄乱 CSS 背景位置，我也弄乱了第一个 javascript 片段。运气不好。

Answer 1

快速了解一下，您是否尝试过实际放置图像，无论是在 div 中还是仅使用 img src 标签来实际移动元素而不是操纵背景图像的 y 轴？