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