overflow-y:auto;を設定したブロック要素の中でスクロールに応じて画像が切り替わるようにしたい

実現したいこと

スクロールに応じて画像が切り替わるような仕組みをoverflow-y:auto;を設定したブロック要素の中で表示したいのですが、作成してみるとoverflow-y:auto;設定したブロック要素ではなくbodyのスクロールを基準に画像が切り替わってしまいます。
改善したい点は以下の2点です。

①画像の切り替えはoverflow-y:auto;設定したブロック要素（#load）のスクロール量を基準にしたい
②画像が出てくる位置はposition: fixed;が設定されているが、こちらもoverflow-y:auto;設定したブロック要素（#load）を基準に固定したい
（fixed→relativeに変えてみたが画像が見えなくなってしまった）

解決方法や作成のヒントになりそうな参考サイトがございましたら教えていただけないでしょうか。
どうぞ宜しくお願いします。

javascript
1$(function(){  
2    $(window).scroll(function(){  
3        var y = jQuery(this).scrollTop();
4        var sc = y / 700; 
5        var c = Math.floor(sc);
6          
7        switch(c){  
8            case 0:  
9            $("#pic1").addClass("on");
10            $("#pic2").removeClass("on");
11            $("#pic3").removeClass("on");
12            $("#pic4").removeClass("on");
13            break;  
14              
15            case 1:  
16            $("#pic1").removeClass("on");
17            $("#pic2").addClass("on");
18            $("#pic3").removeClass("on");
19            $("#pic4").removeClass("on");
20            break;  
21              
22            case 2:  
23            $("#pic1").removeClass("on");
24            $("#pic2").removeClass("on");
25            $("#pic3").addClass("on");
26            $("#pic4").removeClass("on");
27            break;  
28              
29            case 3:  
30            $("#pic1").removeClass("on");
31            $("#pic2").removeClass("on");
32            $("#pic3").removeClass("on");
33            $("#pic4").addClass("on");
34            break;  
35              
36            default:  
37            $("#pic1").addClass("on");
38        }  
39          
40    });  
41  
42});
43$(window).on("load",function(){
44            $("#pic1").addClass("on");
45});

html
1<body>
2 
3<div id="load">
4<div id="person">
5<div id="contents" class="container">
6
7<section class="que">
8<h2>見出し</h2>
9<dl>
10<dt>テキスト</dt>
11<dd>テキスト</dd>
12</dl>
13</section>
14
15<section class="que">
16<h2>見出し</h2>
17<dl>
18<dt>テキスト</dt>
19<dd>テキスト</dd>
20</dl>
21</section>
22
23<section class="que">
24<h2>見出し</h2>
25<dl>
26<dt>テキスト</dt>
27<dd>テキスト</dd>
28</dl>
29</section>
30
31<section class="que">
32<h2>見出し</h2>
33<dl>
34<dt>テキスト</dt>
35<dd>テキスト</dd>
36</dl>
37</section>
38
39<section class="que">
40<h2>見出し</h2>
41<dl>
42<dt>テキスト</dt>
43<dd>テキスト</dd>
44</dl>
45</section>
46
47<section class="que">
48<h2>見出し</h2>
49<dl>
50<dt>テキスト</dt>
51<dd>テキスト</dd>
52</dl>
53</section>
54</div>
55
56<div id="parapara2" class="pc">
57<div id="screen2">
58<img src="img01.jpg" id="pic1">
59<img src="img02.jpg" id="pic2">
60<img src="img03.jpg" id="pic3">
61<img src="img04.jpg" id="pic4">
62</div>
63</div>
64
65</div>
66</div>
67
68<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
69
70 </body>

css
1  #load {
2   max-width:80%;
3   height:800px;
4   overflow-y:auto;
5   -ms-overflow-style:none;/* IE */
6   border: red 1px dashed;
7   margin:0 auto; 
8   }
9  #load::-webkit-scrollbar{
10    display:none;
11  }
12  .container {
13    max-width: 980px;
14    margin: 0 auto;
15    *zoom: 1;
16    line-height: 2;
17    position: relative;
18  }
19  .container:after {
20    content: "";
21    display: table;
22    clear: both;
23  }
24  section {
25    position: relative;
26  }
27  #contents {
28    position: relative;
29  }
30  #parapara {
31    position: fixed;
32    bottom: 0;
33    left: 0;
34    width: 100%;
35    height: 100px;
36    z-index: 5;
37  }
38  #parapara #screen {
39    width: 980px;
40    margin: auto;
41  }
42  #parapara2 {
43    position: fixed;
44    top: 170px;
45    left: 0;
46    width: 100%;
47    height: 600px;
48    z-index: -1;
49  }
50  #parapara2 #screen2 {
51    width: 980px;
52    margin: auto;
53  }
54  #parapara2 #pic1, #parapara2 #pic2, #parapara2 #pic3, #parapara2 #pic4 {
55    position: fixed;
56    transition: 0.5s;
57    transform: scale(0.5);
58    opacity: 0;
59  }
60  #parapara2 #pic1.on, #parapara2 #pic2.on, #parapara2 #pic3.on, #parapara2 #pic4.on {
61    transform: scale(1);
62    opacity: 1;
63  }
64  #person #contents {
65    padding-top: 170px;
66  }
67  #person .que {
68    padding-left: 490px;
69    padding-bottom: 55px;
70  }
71  #person .que h2 {
72    font-size: 20px;
73    font-size: 1.25rem;
74    line-height: 1.4;
75    padding-bottom: 20px;
76  }
77  #person .que h2 i {
78    font-size: 26px;
79    font-size: 1.625rem;
80    color: #c7161d;
81    letter-spacing: 1px;
82  }
83  #person .que dl {
84    background: #fafafa;
85    padding: 30px;
86  }
87  #person .que dl dt {
88    font-size: 22px;
89    font-size: 1.375rem;
90    font-weight: bold;
91    line-height: 1.4;
92  }
93  #person .que dl dd {
94    padding-top: 20px;
95  }

※html最後の連続の改行は一時的に高さを増してスクロールの確認をするために入れています

takopo

2019/09/11 04:28

cssのコードも書いていただいた方が回答を得られやすいと思います。

garudaflap

2019/09/11 06:02

ご意見有難うございます。cssコードを追加しました。

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

回答1件

ベストアンサー

①画像の切り替えはoverflow-y:auto;設定したブロック要素（#load）のスクロール量を基準にしたい

js
1    $(window).scroll(function(){

を

js
1    $("#load").scroll(function(){

に変更。

②画像が出てくる位置はposition: fixed;が設定されているが、こちらもoverflow-y:auto;設定したブロック要素（#load）を基準に固定したい

position: fixed;を指定すると絶対位置（ブラウザ画面が基準）になるので、
親要素に position: relative; 画像に position: absolute; を設定して、
スクロール固定は jQUery で位置指定することになると思います。

CSSの提示がないので具体的なコードは書けませんが。

投稿2019/09/11 04:46

hatena19

総合スコア34073

garudaflap

2019/09/11 06:13 編集

①基準にしたいID名を$()の部分に書けば良かったのですね。 ②#parapara2 #pic1, #parapara2 #pic2, #parapara2 #pic3, #parapara2 #pic4 {}の設定をposition: absolute;に変更したところ解決することができました。（最初#parapara2{}の設定を変えていたのですがもう少し良く見るべきでした）おかげさまで2つとも解決に至りました！本当に有難うございました！

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