パララックスサイトの作り方

jQueryで簡易的なパララックスサイトを作ってみましたが、うまくパララックスになりません。
修正点などあれば教えて頂けると幸いです。

このサイトを参考にした、というかそのままコピペしてみました。
http://lab-b.jp/2013/11/27/post-1095/

上記のサイトにはデモもないのでどういう動きをするかは不明です。
コピペして動かしてみましたが、何も動きに変化はありません。

[html]

<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" type="text/css" href="css/top_style.css">
<link rel="stylesheet" type="text/css" href="css/flow_style.css">
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script>
var parallax = function(){
    var st = $(window).scrollTop();
    $('#content-bottom').css({
        backgroundPosition: 'center ' + Math.floor(-st/10) +'px'
    });
    $('#content-middle').css({
        backgroundPosition: 'center ' + Math.floor(-st/5) +'px'
    });
    $('#content-bottom').css({
        backgroundPosition: 'center ' + Math.floor(-st/2.5) +'px'
    });
}
 
parallax();
$(window).scroll(function(){
    parallax();
});
</script>

<title>ああああああ</title>
</head>

<body>

<div id="content-bottom">
<div id="content-middle">
<div id="content-top">
    <h2 class="hoge">ああああああああ</h2>
</div>
</div>
</div>

</body>

[CSS]

@charset "UTF-8";
/* CSS Document */
#content-bottom {
    background: url(../img/01.jpg) repeat-y fixed center 0;
}
#content-middle {
    background: url(../img/02.jpg) repeat-y fixed center 0;
}
#content-top {
    background: url(../img/03.jpg) repeat-y fixed center 0;
}

m.ts10806

2017/08/28 08:30

「うまくいかない」だけでは何が起きているか分からないので、現状起きている現象、何がどうなっているか「○○のようになるはずなのに××のようになってしまう」といった形式で追記願います。https://teratail.com/help/question-tips#questionTips3-4

退会済みユーザー

2017/08/28 08:40

すいません。コピペしたサイトにデモも何もなかったのでどういう動きをするかわからないですが、とりあえず自分のソースではどう動くかだけは追記しました。

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

回答1件

ベストアンサー

とりあえず、気になったのはCSSにheightが指定されていないので、画像が表示されなさそうな事ですかね…(top_style.cssとflow_style.cssの違いも分かりませんが…)

CSS
1@charset "UTF-8";
2/* CSS Document */
3#content-bottom {
4    height: 2000px;
5    background: url(../img/01.png) repeat-y fixed center 0;
6}
7#content-middle {
8    height:1000px;
9    background: url(../img/02.png) repeat-y fixed center 0;
10}
11#content-top {
12    text-align: center;
13    color: white;
14    height: 500px;
15    background: url(../img/03.png) repeat-y fixed center 0;
16}

それと、Script内部で#content-bottomが2か所指定されているのは#content-topの誤りではないでしょうか？

javascript
1var parallax = function(){
2    var st = $(window).scrollTop();
3    $('#content-bottom').css({
4        backgroundPosition: 'center ' + Math.floor(-st/10) +'px'
5    });
6    $('#content-middle').css({
7        backgroundPosition: 'center ' + Math.floor(-st/5) +'px'
8    });
9    $('#content-top').css({
10        backgroundPosition: 'center ' + Math.floor(-st/2.5) +'px'
11    });
12}