Q&A
どういう操作を想定しているのかわかりませんが、まず同じidの"js-nav-item"が複数存在しているのがおかしいのと、要素が複数あるのにjsのdocument.getElementById('js-nav-item')で1つしか取得していない部分は修正が必要かと思います。
JsのIntersection Observer でのヘッダー固定についての質問です。#js-nav-itemに.special-nav-itemを追加しcolor:black;にしたいのですが効きません。何が原因で効かないのでしょうか。またどうすれば、解決できるでしょうか。ご教授頂けると幸いです。
html
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8" /> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 6 <title>jQuery 追加課題1</title> 7 <link rel="stylesheet" href="css/style.css" /> 8 <link rel="stylesheet" href="css/reset.css"> 9 10 </head> 11 <body> 12 13 <div class="mv" id="js-mv"> 14 <header class="header" id="js-header"> 15 <h2 class="mv-ttl">SAMPLE</h2> 16 <nav class="mv-nav"> 17 <ul class="nav-items"> 18 <li class="nav-item" id="js-nav-item"><a href="">ホーム</a></li> 19 <li class="nav-item" id="js-nav-item"><a href="">SAMPLEについて</a></li> 20 <li class="nav-item" id="js-nav-item"><a href="">SAMPLEのメンバー</a></li> 21 <li class="nav-item" id="js-nav-item"><a href="">採用情報</a></li> 22 <li class="nav-item" id="js-nav-item"><a href="">お問い合わせ</a></li> 23 </ul> 24 </nav> 25 </header> 26 <div class="mv-message"> 27 <h3 class="mv-message-ja">未来を<br>チャレンジする<br>人になれ</h3> 28 <p class="mv-message-en">to be challenger<br>for the future</p> 29 </div> 30 </div> 31 <section class="human-challenge"> 32 <div class="human-challenge-ttl"> 33 <h2 class="human-challenge-ttl-en">People's Challenge<br>for the People<br>by the People</h2> 34 <p class="human-challenge-ttl-ja">人の人による人の挑戦</p> 35 </div> 36 <div class="about-human-challenge-ttl"> 37 <p class="about-human-challenge-ttl-paragraph">人はなぜ挑戦するのか</p> 38 <p class="about-human-challenge-ttl-paragraph">それでいてなぜ諦めるのか</p> 39 <p class="about-human-challenge-ttl-paragraph">人はなぜ努力するのか</p> 40 <p class="about-human-challenge-ttl-paragraph">それでいてなぜ怠けるのか</p> 41 <p class="about-human-challenge-ttl-paragraph">全ての未来は自分に託されているのです</p> 42 </div> 43 </section> 44 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> 45 <script src="js/jquery.bgswitcher.js"></script> 46 <script src="js/main.js"></script> 47 48 </body> 49</html> 50
css
1@charset "UTF-8"; 2 3 4 5.mv { 6 width: 100%; 7 height: 700px; 8 background-position:center center; 9 background-size: cover; 10 position: relative; 11 /* display: flex; 12 align-items: center; 13 justify-content: center; */ 14} 15 16.header{ 17 padding: 30px; 18 display: flex; 19 width: 100%; 20 height: 90px; 21 align-items: center; 22 position: absolute; 23 top: 0; 24 left: 0; 25 z-index: 1; 26} 27 28.fixed{ 29 position: fixed;/*fixedを設定して固定*/ 30 z-index: 999;/*最前面へ*/ 31 top:0;/*位置指定*/ 32 left:0;/*位置指定*/ 33 background-color: white; 34 } 35 36.mv-ttl{ 37 font-size: 26px; 38 font-weight: bold; 39 color: red; 40 41} 42 43.mv-nav{ 44 width: 80%; 45 margin-left: auto; 46} 47 48.nav-items{ 49 display: flex; 50 justify-content: space-between; 51} 52 53.nav-item{ 54 color:white; 55 font-weight: bold; 56} 57 58.special-nav-item{ 59 color: black; 60} 61 62.nav-item a{ 63 display: block; 64 font-size: 14px; 65} 66 67.mv-message{ 68 font-size: 28px; 69 text-align: center; 70 font-weight: bold; 71 padding: 50px; 72 color: red; 73 border: solid 8px red; 74 position: absolute; 75 top: 50%; 76 left: 50%; 77 transform: translate(-50%,-50%); 78} 79 80.mv-message-ja{ 81 line-height: 40px; 82} 83 84.mv-message-en{ 85 font-size: 14px; 86 line-height: 24px; 87 margin-top: 30px; 88} 89 90.human-challenge{ 91 height: 700px; 92 background-image: url(../img/philosophy.jpg); 93 background-size: cover; 94 padding-top: 100px; 95 position: relative; 96} 97 98.human-challenge::before { 99 content: ''; 100 /* ↓暗いオーバーレイを半透明で配置 */ 101 background-image: linear-gradient(to bottom, rgb(185, 75, 75) 50%, rgba(0,0,0,0)); 102 /* ↓全体を覆うように配置 */ 103 position: absolute; 104 top: 0; 105 left: 0; 106 width: 100%; 107 height: 100%; 108 display: block; 109 } 110 111 .human-challenge-ttl{ 112 position:relative; 113 z-index: 1; 114 color: white; 115 text-align: center; 116 } 117 118 .human-challenge-ttl-en{ 119 font-size: 36px; 120 font-weight: bold; 121 line-height: 50px; 122 123 } 124 125.human-challenge-ttl-ja{ 126 font-size: 18px; 127 margin-top: 30px; 128} 129 130.about-human-challenge-ttl{ 131 line-height: 32px; 132 text-align: center; 133 margin-top: 80px; 134 color: white; 135 position: relative; 136 z-index: 1; 137} 138 139
js
1'use strict'; 2 3jQuery(function($) { 4 $('.mv').bgSwitcher({ 5 images: ['img/slide01.jpg','img/slide02.jpg','img/slide03.jpg','img/slide04.jpg'], // 切り替え画像 6 Interval: 5000, //切り替えの間隔 1000=1秒 7 start: true, //$.fn.bgswitcher(config)をコールした時に切り替えを開始する 8 loop: true, //切り替えをループする 9 shuffle: false, //背景画像の順番をシャッフルする 10 effect: "fade", //エフェクトの種類 "fade" "blind" "clip" "slide" "drop" "hide" 11 duration: 1000, //エフェクトの時間 1000=1秒 12 easing: "swing", //エフェクトのイージング "swing" "linear" 13 }); 14}); 15 16const header = document.getElementById('js-header'); 17const headerNavItem = document.getElementById('js-nav-item'); 18// IntersectionObserverの作成 19const observerHeader = new IntersectionObserver ((entries) => { 20 for (const e of entries) { 21 // 監視対象が画面内にあるとき 22 if (e.isIntersecting) { 23 header.classList.remove('fixed'); 24 headerNavItem.classList.remove('special-nav-item'); 25 // 監視対象が画面外にあるとき 26 } else { 27 header.classList.add('fixed'); 28 headerNavItem.classList.add('special-nav-item'); 29 } 30 } 31}); 32 33 34// ファーストビューを監視 35observerHeader.observe(document.getElementById('js-mv')); 36 37
試したこと：試しに.fixedにcolor:black;をかけてみたが、.nav-item、.mv-ttlの文字色も変わらなかった。
ご指摘ありがとうございます。ID名は同じのを使ってはいけないというルール忘れていました。
私の想定は、画面から#js-mvが無くなると、１、.headerが固定され背景色が白くなる。２、.nav-itemの文字が黒くなるといったものです。
回答1件
0
Intersection Observerは動作しているようなので
.nav-itemにクラスを追加せずとも、先祖に付与された.fixedを利用して
css
1.fixed .nav-item a{ 2 color: black; 3}
とcssを追加すればリンクの色は変わると思います。
一応、現状の形でも
css
1.special-nav-item a{ /*aを追加*/ 2 color: black; 3}
とすればリンクも1つだけ色が変わると思います。
（document.getElementById('js-nav-item')としているので1つにしかクラス名が付いていない）
投稿2021/08/27 13:32
総合スコア1293
あなたの回答
tips
プレビュー
