Webサイトのスクロールに応じて徐々に背景をずらしたい

ブログサイトを作っていますが、CSSやJavascriptの知識が乏しいため質問させていただきます。
サイトに縦長の画像を設定していますが、記事のスクロールに合わせて背景を徐々にずらすように出来ないかと思っています。
色々サイトを調べてスクロール量をjavascriptで取得して、
背景のCSSでbackground-positionを調整すればよいのかと思ってcodepenでやってみましたが、背景画像が斜めに動いているようで思うような表現ができません。
↓codepen
https://codepen.io/anon/pen/yEeBdP?editors=1111

大体以下のような構成で作っています。

html
<body>
<main>
    <article>
　　記事

　　</article>
</main>
</body>

css
body {
  background-image: url(https://www.pakutaso.com/shared/img/thumb/wpIMGL2787_TP_V.jpg);
  background-size: cover;
}

article {
  text-align: justify;
}

javascript
window.addEventListener("load", function() {
  window.addEventListener("scroll", function() {

    var scrollH = document.documentElement.scrollHeight || document.body.scrollHeight; 
    var scrollV = scrollH　- window.innerHeight; 
    var windowY = window.pageYOffset;

    document.body.style.backgroundPosition = (windowY / scrollV) * 100 +　"% 0";
  }, false);
}, false);

初心者質問で恐縮ですが、ご教示いただけると幸いです。

行動規範の内容に同意します

回答1件

ベストアンサー

JavaScript を消してみれば分かると思いますが、body に

css
1background-attachment fixed;

が指定されていないので、背景の位置が固定されず、スクロールすると画像もそのままスクロールされます。

background-position の指定も横方向と縦方向の位置が逆じゃないでしょうか。
横方向、縦方向の順番で指定しなければなりません。

javascript
1document.body.style.backgroundPosition =  '0 ' + (windowY / scrollV) * 100 + '%';

それと、iOS など background-attachment: fixed が効かないブラウザもあるので、その対応もしたい場合は、background-position プロパティで動かすのではなく、背景用の <div> を作るなどして position: fixed を指定した上で top プロパティで動かしましょう。

css
1.background-layer {
2  position: fixed;
3  top: 0;
4  left: 0;
5  z-index: -1;
6  width: 100%;
7  height: 100%;
8  user-select: none;
9  background-image: url(https://www.pakutaso.com/shared/img/thumb/wpIMGL2787_TP_V.jpg);
10  background-size: cover;
11}