jquery（スクロール）を使用した動的CSSプロパティ

Question

私は背景画像を持つヒーローセクションを持っています。スクロールのbackground-positionプロパティを編集して視差効果を作りたいと思います。私は、このようなページがある点の上にスクロールされた後、ナビゲーションバーにクラスを追加するなど、他の動的効果を削除した

$(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' 
     }); 
    } 
}; 

：私は以下の通りであるJavaScriptファイルを持っています。 Chromeで要素が動的なbackground-positionプロパティを取得しているのがわかりますが、画像は何もしていないようです。

Chromeでは、手動でデベロッパーツールにアクセスしてbackground-positionプロパティを追加し、矢印キーを使用してテキストフィールドの値を増減すると、画像が上下左右に移動することがあります。 Chromeでも

私はチェックを外しelement.styleセクションで CSSプロパティにしようとすると、彼らが無効にされていたら、それだけで、他のプロパティと同様に、裏抜けを得ることはありません。下記を参照してください。

は、誰かがこの問題が発生していると、誰かが解決策を提供できる理由を説明できますか？

ここにコメントの人のJSFiddleがあります。

ありがとうございます。

Answer 1

値を変更していない変数を使用しています。

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

可変currentWindowPosゼロである初期scrollTop値を有しています。あなたはそれを更新することはありません。私が気づくことができるように、画像に視差効果を適用しようとしています。もちろんこの

'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>

のようなものに、このライン

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

を変更してみてください、あなたは速度を調整するために*0.5を編集することができます。