前提
ここに質問の内容を詳しく書いてください。
スクロールに合わせた背景色の切り替え処理(Intersection Observer API使用)
実現したいこと
mainタグ内のsectionタグがスクロールにより画面内に表示された時に親要素の背景色を変更したい。
https://konocode.jp/9283/
イメージはこのリンクのような感じです。
発生している問題・エラーメッセージ
intersection Observer を使用して実装しようと考えているのですが、sectionタグが画面に表示された場合に親要素のmainタグにscssで指定している.clr_01 ~ .clr_04 までのクラス付与してsectionごとに背景色を変更したい。
該当のソースコード
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="sanitize.css"> <link rel="stylesheet" href="style.css"> </head> <body> <header id="header"> <div class="header-list"> <h1>XXXXXX</h1> <ul class="header-sns-list"> <li class="logo"><a href="#"><img src="/image/insta.png" alt=""></a></li> <li class="logo"><a href="#"><img src="/image/twitter-white.svg" alt=""></a></li> <li class="logo"><a href="#"><img src="/image/youtube.svg" alt=""></a></li> </ul> <ul class="header-nav-list"> <li>VIDEOGRAPH</li> <li>PHOTOGRAPH</li> <li>ABOUT</li> <li>CONTACT</li> </ul> </div> <div id="video-area"> <video id="video" src="/image/adobe1.mp4" muted autoplay loop></video> </div> </header> <main id="main" class="bg-clor"> <section id="videograph" class="sec-01"> <h2 class="title">VIDEOGRAPH</h2> <ul class="video-list"> <li>XXXXX</li> <li>XXXXX</li> <li>XXXXX</li> <li>XXXXX</li> </ul> <button class="button"> <p>View All</p> <span class="icon-right"></span> <span class="icon-right after"></span> </button> </section> <section id="photograph" class="sec-02"> <h2 class="title">PHOTOGRAPH</h2> <ul class="photo-list"> <!-- 画像ポップアップ表示 --> <li>XXXXXX</li> <li>XXXXXX</li> <li>XXXXXX</li> </ul> <button class="button"> <p>View All</p> <span class="icon-right"></span> <span class="icon-right after"></span> </button> </section> <section id="about" class="sec-03"> <h2 class="title">ABOUT</h2> <div class="ab-box"> <p><small>xxxxxx</small></p> <h3>XXXXX</h3> <p class="tx-box">紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。紹介文が入ります。</p> </div> <p class="img-face"><img src="" alt=""></p> </section> <section id="contact" class="sec-04"> <h2 class="title">CONTACT</h2> <form class="formrun"> <div class="btm30"> <table class="tblStyle_03" width="100%"> <tbody> フォーム内容 </tbody> </table> </div> <p class="subscribeBtn top40"> <button type="submit" class="btn" data-formrun-error-text="未入力の項目があります" data-formrun-submitting-text="送信中..." data-formrun-default-text="送信する">SENDING</button> </p> </form> </section> </main> <footer id="footer"> <div class="footer-bx01"> <h3>YAMASHIRO TATSUKI</h3> <p><small>videograph | photograph</small></p> </div> <div class="footer-bx02"> <ul> <li class="first ft-li">SNS</li> <li class="logo ft-li"><a href="#"><img src="/image/insta.png" alt=""></a></li> <li class="logo ft-li"><a href="#"><img src="/image/twitter-white.svg" alt=""></a></li> <li class="logo ft-li"><a href="#"><img src="/image/youtube.svg" alt=""></a></li> </ul> </div> <p class="en-nam"><small><span>©️</span><small>TATSUKI YAMASHIRO</small></small></p> </footer> <script src="/script.js"></script> </body> </html> </body>
SCSS #header{ position: relative;/*h1の中央寄せ配置の起点とするためのrelative*/ height: 100vh } #video-area{ position: fixed; z-index: -1;/*最背面に設定*/ top: 0; right:0; left:0; bottom:0; overflow: hidden; #video { /*天地中央配置*/ display: block; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); /*縦横幅指定*/ min-height: 100%; min-width: 100%; filter: brightness(0.4); } } #main { background-color: #222222; transition: all 1s ease; .clr_01 { background-color: #222222; transition: all 0.6s; } .clr_02 { background-color: #043848; transition: all 0.6s; } .clr_03 { background-color: #222222; transition: all 0.6s; } .clr_04 { background-color: #253355; } #videograph{ padding:100px 0; text-align: center; font-size: 1rem; max-width: 1200px; margin: 0 auto; } #photograph{ padding:100px 0 250px 0; text-align: center; font-size: 1rem; max-width: 1200px; margin: 0 auto; } #about { padding:0 0 100px 0; text-align: center; font-size: 1rem; max-width: 1200px; margin: 0 auto; } #contact { padding:100px 30px; text-align: center; font-size: 1rem; max-width: 860px; margin: 0 auto; } .formrun { text-align: left; margin: 0 auto; btm30 { .tblStyle_03 { width: 100%; tbody { display: table-row-group; } } } } }
Javascript const observer = new IntersectionObserver((entries) => { for(const e of entries) { if(e.isIntersecting) { document.getElementById('main').style.backgroundColor = '#222222'; } else { document.getElementById('main').style.backgroundColor = '#043848'; } } }); observer.observe(document.getElementById('about'))
試したこと
ovserverで該当のクラスが表示されたら直接back-groundを書き換える。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。

回答1件
あなたの回答
tips
プレビュー