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

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轴？