使用jQuery獲取動態背景位置

Question

我試圖在網站上實現視差滾動效果（使用來自Smashing雜誌的this tutorial）。視差效果工作正常，但我需要讓其中一個精靈在到達某個點時停止滾動。默認情況下，它會繼續滾動直到它不在視圖中。

視差效果通過動畫元素的背景位置起作用。我想使用此代碼來獲取動態背景位置：

jQuery(function($) { 

      var elem = $("#heart-box"); 

      var backgroundPos = $(elem).css("backgroundPosition").split(" "); 

      var xPos = backgroundPos[0], 
       yPos = backgroundPos[1]; 

      $(window).scroll(function() { 

       console.log(yPos); 

       if (yPos >= 210) { 
        $(elem).hide(); 
       } 
      }); 

     }); 

相反，剛開始位置被返回，如CSS定義，當頁面滾動在控制檯日誌未改變。

當頁面滾動時，背景Y位置會動態變化 - 其範圍大約從-200px開始，到最後時爲400px。當背景Y位置達到210px時，我希望元素具有210px的固定背景位置，而不是保持滾動。

任何幫助將是偉大的。謝謝。

Answer 1

返回初始值是因爲yPos設置爲您的scroll回調之外的backgroundPosition的值。在Javascript中，只有對象通過引用傳遞，所以當您從變更中檢索到它們的CSS屬性時，您的backgroundPos,yPos和xPos變量（在本例中爲原始類型 - 字符串）不會更改;他們具有他們最初分配的價值，因爲您永遠不會重新分配他們。

爲了使您的工作方式符合您的期望，您需要檢索scroll回調中的當前背景位置。

$(window).scroll(function() { 

    var backgroundPos = $(elem).css("backgroundPosition").split(" "); 
    var xPos = backgroundPos[0], 
     yPos = backgroundPos[1]; 

    console.log(yPos); 

    if (yPos >= 210) { 
     $(elem).hide(); 
    } 

}); 

爲了使這會更有效，你可以的$(elem)結果分配給滾動回調的變量外，這樣的選擇是不是對每一個滾動的事件稱爲（更多相關的，如果你使用一個字符串作爲選擇器）：

var elem = $(elem); 
... 
elem.css("backgroundPosition").split(" ");