質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.37%

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

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 571

score 6

実現したいこと

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

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

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

$(function(){  
    $(window).scroll(function(){  
        var y = jQuery(this).scrollTop();
        var sc = y / 700; 
        var c = Math.floor(sc);

        switch(c){  
            case 0:  
            $("#pic1").addClass("on");
            $("#pic2").removeClass("on");
            $("#pic3").removeClass("on");
            $("#pic4").removeClass("on");
            break;  

            case 1:  
            $("#pic1").removeClass("on");
            $("#pic2").addClass("on");
            $("#pic3").removeClass("on");
            $("#pic4").removeClass("on");
            break;  

            case 2:  
            $("#pic1").removeClass("on");
            $("#pic2").removeClass("on");
            $("#pic3").addClass("on");
            $("#pic4").removeClass("on");
            break;  

            case 3:  
            $("#pic1").removeClass("on");
            $("#pic2").removeClass("on");
            $("#pic3").removeClass("on");
            $("#pic4").addClass("on");
            break;  

            default:  
            $("#pic1").addClass("on");
        }  

    });  

});
$(window).on("load",function(){
            $("#pic1").addClass("on");
});
<body>

<div id="load">
<div id="person">
<div id="contents" class="container">

<section class="que">
<h2>見出し</h2>
<dl>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
</section>

<section class="que">
<h2>見出し</h2>
<dl>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
</section>

<section class="que">
<h2>見出し</h2>
<dl>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
</section>

<section class="que">
<h2>見出し</h2>
<dl>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
</section>

<section class="que">
<h2>見出し</h2>
<dl>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
</section>

<section class="que">
<h2>見出し</h2>
<dl>
<dt>テキスト</dt>
<dd>テキスト</dd>
</dl>
</section>
</div>

<div id="parapara2" class="pc">
<div id="screen2">
<img src="img01.jpg" id="pic1">
<img src="img02.jpg" id="pic2">
<img src="img03.jpg" id="pic3">
<img src="img04.jpg" id="pic4">
</div>
</div>

</div>
</div>

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

 </body>
  #load {
   max-width:80%;
   height:800px;
   overflow-y:auto;
   -ms-overflow-style:none;/* IE */
   border: red 1px dashed;
   margin:0 auto; 
   }
  #load::-webkit-scrollbar{
    display:none;
  }
  .container {
    max-width: 980px;
    margin: 0 auto;
    *zoom: 1;
    line-height: 2;
    position: relative;
  }
  .container:after {
    content: "";
    display: table;
    clear: both;
  }
  section {
    position: relative;
  }
  #contents {
    position: relative;
  }
  #parapara {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    z-index: 5;
  }
  #parapara #screen {
    width: 980px;
    margin: auto;
  }
  #parapara2 {
    position: fixed;
    top: 170px;
    left: 0;
    width: 100%;
    height: 600px;
    z-index: -1;
  }
  #parapara2 #screen2 {
    width: 980px;
    margin: auto;
  }
  #parapara2 #pic1, #parapara2 #pic2, #parapara2 #pic3, #parapara2 #pic4 {
    position: fixed;
    transition: 0.5s;
    transform: scale(0.5);
    opacity: 0;
  }
  #parapara2 #pic1.on, #parapara2 #pic2.on, #parapara2 #pic3.on, #parapara2 #pic4.on {
    transform: scale(1);
    opacity: 1;
  }
  #person #contents {
    padding-top: 170px;
  }
  #person .que {
    padding-left: 490px;
    padding-bottom: 55px;
  }
  #person .que h2 {
    font-size: 20px;
    font-size: 1.25rem;
    line-height: 1.4;
    padding-bottom: 20px;
  }
  #person .que h2 i {
    font-size: 26px;
    font-size: 1.625rem;
    color: #c7161d;
    letter-spacing: 1px;
  }
  #person .que dl {
    background: #fafafa;
    padding: 30px;
  }
  #person .que dl dt {
    font-size: 22px;
    font-size: 1.375rem;
    font-weight: bold;
    line-height: 1.4;
  }
  #person .que dl dd {
    padding-top: 20px;
  }


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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • takopo

    2019/09/11 13:28

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

    キャンセル

  • garudaflap

    2019/09/11 15:02

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

    キャンセル

回答 1

checkベストアンサー

+1

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

    $(window).scroll(function(){


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


に変更。

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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/09/11 15:13 編集

    ①基準にしたいID名を$()の部分に書けば良かったのですね。
    ②#parapara2 #pic1, #parapara2 #pic2, #parapara2 #pic3, #parapara2 #pic4 {}の設定をposition: absolute;に変更したところ解決することができました。
    (最初#parapara2{}の設定を変えていたのですがもう少し良く見るべきでした)

    おかげさまで2つとも解決に至りました!本当に有難うございました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る