jQuery的動態CSS屬性（在滾動）

Question

我有一個英雄部分有一個背景圖像。我希望通過在滾動上編輯background-position屬性來創建視差效果。我有一個JavaScript文件，該文件是如下：

$(document).ready(function() { 
    $(window).on('scroll', function() { 
     // Parallax effect 
     parallax.effect(); // TODO: rename this function 
    }); 
}); 

// Global variables 
var currentWindowPos = $(window).scrollTop(); 

var parallax = { 
    // Variables 
    element: $('.hero.hero-bg'), 
    bgPosition: 0, 

    // Functions 
    effect: function() { 
     $(parallax.element).css({ 
      'background-position': '0 -' + parseInt(360 + (currentWindowPos * .025)) + 'px' 
     }); 
    } 
}; 

我已刪除等動態效果，如增加類導航欄一旦頁面已滾動超過一定點。我可以在Chrome中看到元素獲取動態background-position屬性，但該圖像似乎沒有做任何事情。

在Chrome中，如果我手動進入開發人員工具並添加background-position屬性並使用箭頭鍵增大或減小文本字段中的值，則可以看到圖像上下左右移動。

而且在Chrome中，如果我試圖勾去掉在element.style部分CSS屬性，它不打通一擊，就像其他的屬性，一旦他們已被禁用。請看下面。

有人能解釋爲什麼這個問題正在發生，會有人提供解決方案？

這是一個JSFiddle在評論中的人。

在此先感謝。

Answer 1

您正在使用一個值根本不變的變量。

var currentWindowPos = $(window).scrollTop(); 

變量currentWindowPos具有初始scrollTop值，即零。你永遠不會更新它。正如我能夠注意到的那樣，您正試圖對圖像應用視差效果。嘗試改變這一行

'background-position': '0 -' + parseInt(360 + (currentWindowPos * .025)) + 'px' 

到這樣的事情

'background-position': 'center -' + $(window).scrollTop() * 0.5 + 'px' 

$(document).ready(function() { 
 
    $(window).on('scroll', function() { 
 
     // Parallax effect 
 
     parallax.effect(); // TODO: rename this function 
 
    }); 
 
}); 
 

 
var parallax = { 
 
    // Variables 
 
    element: $('.hero.hero-bg'), 
 
    bgPosition: 0, 
 

 
    // Functions 
 
    effect: function() { 
 
     $(parallax.element).css({ 
 
      'background-position': 'center -' + $(window).scrollTop()*0.5+'px' 
 
     }); 
 
    } 
 
};

.hero { 
 
    width: 100%; 
 
    height: 34rem; 
 
    display: table; 
 
    position: relative; 
 
    background-image: linear-gradient(180deg, rgba(23, 162, 184, 0.7), rgba(10, 97, 135, 0.7)); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.hero.hero-bg { 
 
    background-size: cover; 
 
    background-position: center; 
 
} 
 

 
.hero.hero-bg:after { 
 
    width: 100%; 
 
    height: 34rem; 
 
    content: ""; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(180deg, rgba(23, 162, 184, 0.7), rgba(10, 97, 135, 0.7)); 
 
    background-repeat: repeat-x; 
 
} 
 

 
.hero .inner-wrapper { 
 
    width: 100%; 
 
    height: auto; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    position: relative; 
 
    z-index: 999; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hero hero-bg" style="background-image: url('https://i.ytimg.com/vi/eNB8HLrxcD4/maxresdefault.jpg');"> 
 
    <h1>Hero section</h1> 
 
</div> 
 

 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p> 
 
<p>content</p>

當然，你可以編輯*0.5調整速度。