Q&A
htmlも載せておいたほうがよいのでは？
前提・実現したいこと
スクロール量に合わせて画像を変化させる命令をしたいです。
発生している問題・エラーメッセージ
反映されません。どこをなおすべきでしょうか？ 変更されるはずの画像が読み込めていません！
該当のソースコード
jQuery
1// JavaScript Document 2/* global $ */ 3$(function(){ 4 $('window').scroll(function(){ 5 var works = $('#main_top1 h2').offset().top; 6 var navi = $('#fixed img').scrollTop(); 7 if(navi > works){ 8 $('#fixed img').attr('src','image/nav2.jpg'); 9 } 10 }) 11 $('window').scroll(function(){ 12 var profile = $('#main_top2 h2').offset().top; 13 var navi = $('#fixed img').scrollTop(); 14 if(navi > profile){ 15 $('#fixed img').attr('src','image/nav3.jpg'); 16 } 17 }) 18 });
HTML
HTML
1<!doctype html> 2<html> 3<head> 4<meta charset="UTF-8"> 5<title>無題ドキュメント</title> 6<link rel="stylesheet" href="css/riset.css"> 7<link rel="stylesheet" href="css/index.css"> 8</head> 9<body> 10 <header id="header"> 11 <h1><img src="image/logo.png" alt="#"></h1> 12 <div id="fixed"> 13 <p><img src="image/sukuroru.png" alt="#"></p> 14 </div> 15 <nav id="header_nav"> 16 <ul> 17 <li><a href="../0000/index.html">0000</a></li> 18 <li><a href="../0000/work.html">0000</a></li> 19 <li><a href="../0000/web.html">0000</a></li> 20 <li><a href="../0000/dtp.html">0000</a></li> 21 <li><a href="#">PROFILE</a></li> 22 </ul> 23 </nav> 24 <p class="top"><img src="image/header_top.png" alt="#"></p> 25 <p id="header_bottom"><a href="#">SCROLL<img src="image/header_bottom.png" alt="#"></a></p> 26 </header> 27 <main id="main"> 28 <article id="main_top1"> 29 <h2>WORKS</h2> 30 <div id="top_serect"> 31 <p><a href="#"><img src="image/yazirusi2.png" alt="#"></a></p> 32 <p class="pop1"><a href="#"><img src="image/kaimaku.png" alt="#"></a></p> 33 <p><a href="#"><img src="image/youchien.png" alt="#"></a></p> 34 <p class="pop2"><a href="#"><img src="image/kaimaku.png" alt="#"></a></p> 35 <p><a href="#"><img src="image/yazirusi1.png" alt="#"></a></p> 36 </div> 37 <div class="top_bottan"> 38 <p class="first_bottan"><a href="../portfolio/web.html">0000</a></p><br><p><a href="../portfolio/dtp.html">0000</a></p> 39 </div> 40 </article> 41 <article id="main_top2"> 42 <h2>0000</h2> 43 <div id="top_select2"> 44 <p><img src="image/photo_1.png" alt="#">0000</p> 45 <dl> 46 <dt>0000</dt><dd>0000</dd> 47 <dt>Career</dt><dd class="none2">0000</dd><dd class="none1">0000</dd><dd>0000</dd> 48 <dt>0000</dt><dd>0000</dd> 49 <dt>0000</dt><dd>0000</dd> 50 <dt>0000</dt><dd>0000</dd> 51 <dt>0000</dt><dd>0000</dd> 52 </dl> 53 </div> 54 </article> 55 </main> 56 <footer id="footer"> 57 <nav> 58 <ul> 59 <li><a href="../0000/index.html">TOP</a></li> 60 <li><a href="../0000/work.html">WORKS</a></li> 61 <li><a href="../0000/web.html">WEB</a></li> 62 <li><a href="../0000/dtp.html">DTP</a></li> 63 <li><a href="#">PROFILE</a></li> 64 </ul> 65 </nav> 66 <p>©0000</p> 67 </footer> 68 <script src="js/jquery-3.3.1.min.js"></script> 69 <script src="js/index.js"></script> 70</body> 71</html>
css
css
1@charset "UTF-8"; 2/* CSS Document */ 3body{ 4 font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif; 5/* background-image: url(../image/top.jpg);*/ 6/* width: 1400px;*/ 7 font-size: 10px; 8 color: #000000; 9 min-width: 1000px; 10} 11#header{ 12 height: 100vh; 13 background-image: url(../image/back_img.jpg); 14} 15h1{ 16 float: left; 17 margin-top: 44px; 18 margin-left: 80px; 19} 20#fixed{ 21 position: fixed; 22 top: 274px; 23 left: 82px; 24} 25#header_nav{ 26 float: right; 27 margin-right: 80px; 28 margin-top: 48px; 29} 30#header_nav li{ 31 float: left; 32 margin-left: 15px; 33} 34#header_nav li a{ 35 color: #000000; 36 letter-spacing: 1.7px; 37} 38#header_nav li a:hover{ 39 color: #989898; 40} 41#header .top{ 42 clear: both; 43 text-align: center; 44} 45#header .top img{ 46 margin-top: 210px; 47} 48#header_bottom{ 49 display: block; 50 width: 60px; 51 margin-left: auto; 52 margin-right: auto; 53 letter-spacing: 1.7px; 54 position: absolute; 55 left: 50%; 56 right: 50%; 57 bottom: 50px; 58} 59#header_bottom a{ 60 font-size: 15px; 61 color: #989898; 62 text-decoration: none; 63} 64#header_bottom a img{ 65 margin-top: 7px; 66 display: block; 67 width: 20px; 68 margin-left: auto; 69 margin-right: auto; 70 margin-bottom: 19px; 71} 72#main{ 73 width: 1044px; 74 margin-left: auto; 75 margin-right: auto; 76} 77#main_top1{ 78 padding-top: 99px; 79 padding-bottom:38px; 80} 81#main_top1 h2{ 82 font-size: 24px; 83 text-align: center; 84 margin-bottom: 91px; 85 letter-spacing: 1.7px; 86} 87#top_serect{ 88 overflow: hidden; 89 margin-bottom: 30px; 90} 91#top_serect p{ 92 float: left; 93} 94#top_serect .pop1{ 95 margin-left: 90px; 96 margin-right: 80px; 97} 98#top_serect .pop2{ 99 margin-right: 90px; 100 margin-left: 80px; 101} 102#top_serect p:first-of-type, 103#top_serect p:last-of-type{ 104 margin-top: 179px; 105} 106#top_serect .pop1, 107#top_serect .pop2{ 108 margin-top: 58px; 109} 110#main_top1 .top_bottan{ 111 width: 147px; 112 margin-left: auto; 113 margin-right: auto; 114} 115#main_top1 .top_bottan p{ 116 display: inline-block; 117 margin-bottom: 10px; 118} 119#main_top1 .top_bottan a{ 120 display: inline-block; 121 width: 147px; 122 margin-left: auto; 123 margin-right: auto; 124 line-height: 36px; 125 font-size: 13px; 126 text-decoration: none; 127 color: #000000; 128 border: solid 1px #e5e5e5; 129 border-radius: 10px; 130 text-align: center; 131 background-color: #e5e5e5; 132} 133#main_top1 .top_bottan a:hover{ 134 background-color: #ffffff; 135} 136#main_top1 .top_bottan .first_bottan{ 137 margin-right: 20px; 138} 139#main_top2 { 140 margin-top: 152px; 141} 142#main_top2 h2{ 143 font-size: 24px; 144 text-align: center; 145 letter-spacing: 1.7px; 146} 147#top_select2{ 148 width: 650px; 149 margin-left: auto; 150 margin-right: auto; 151 overflow: hidden; 152} 153#main_top2 p{ 154 width: 204px; 155 float: left; 156 margin-top: 20px; 157 font-size: 14px; 158 text-align: center; 159} 160#main_top2 dl{ 161 width: 384px; 162 float: right; 163 margin-top: 60px; 164 165} 166#main_top2 dt{ 167 float: left; 168 font-size: 13px; 169} 170#main_top2 dd{ 171 border-bottom: solid #000000 1px; 172 padding-bottom: 5px; 173 margin-bottom: 20px; 174 text-align: right; 175 font-size: 12px; 176} 177#main_top2 dl .none1, 178#main_top2 dl .none2{ 179 border-bottom: none; 180 margin-bottom: 2px; 181} 182#footer{ 183 margin-top: 172px; 184 margin-bottom: 52px; 185 overflow: hidden; 186} 187#footer nav{ 188 float: left; 189 margin-left: 80px; 190} 191#footer li{ 192 float: left; 193 font-size: 10px; 194 margin-right: 15px; 195} 196#footer a{ 197 color: #000000; 198 letter-spacing: 1.7px; 199} 200#footer a:hover{ 201 color: #989898; 202} 203#footer p{ 204 float: right; 205 font-size: 12px; 206 margin-right: 80px; 207 letter-spacing: 1.7px; 208}
追加しました！不慣れで申し訳ないです
変数名こそ異なるものの、二つのスクリプトは同じものですよね？ nav2.jpgとnav3.jpgとのどちらにしたいのでしょうか？
別のものとしたかったのですが、記述をミスしていました！変更します！
'window'ですが、このちょんちょんを取ってみてください。うまく動かないときは、動かそうとしてるコードのあたりをデバッグツールで調べてたほうがよいかと。思った値が取れているか、思ったように変わっているか、一行一行実行することもかのうなので、確認できると思います。
あと、どんな感じなったら正解なのかがわかりません。「ページをスクロールしていって、ある記事の位置にきたら、それに対応した画像を表示させたい」という理解であっていますでしょうか？
windowのみにしてみましたがかわりませんでした！
「固定された画像をある記事の位置にきたら、それに対応した画像に変更させたい」です！
回答2件
0
htmlやcssは確認用にハショッテますので、適宜読み替えてください。
要点としては、<javascript>のタグの中身です。
html
1<style> 2 article { 3 height: 700px; 4 border: 1; 5 background: salmon; 6 } 7</style> 8 9<!doctype html> 10<html> 11 12<head> 13 <meta charset="UTF-8"> 14 <title>無題ドキュメント</title> 15 <link rel="stylesheet" href="index.css"> 16</head> 17 18<body> 19 <header id="header"> 20 <div id="fixed"> 21 <p><img src="https://3.bp.blogspot.com/-Ncn2Gj8Aq9k/WwJZjGt-FBI/AAAAAAABMF0/5Uco6MFSragyb_xcDgrfuUFZMfx9diW2gCLcBGAs/s180-c/bird_okameinkogray.png" 22 alt="変更対象の画像"></p> 23 </div> 24 </header> 25 <main id="main"> 26 <article id="main_top1"> 27 <h2>WORKS</h2> 28 </article> 29 <article id="main_top2"> 30 <h2>WORKS</h2> 31 </article> 32 </main> 33</body> 34 35</html> 36 37<script src="https://code.jquery.com/jquery-3.3.1.js"></script> 38<script> 39 $(function () { 40 function getRange(elem) { 41 var range = {} 42 range.a = elem.offset().top; 43 range.b = range.a + elem.height(); 44 return range; 45 } 46 function inRange(value, range) { 47 return range.a <= value && value <= range.b; 48 } 49 $(window).scroll(function () { 50 // naviの位置は常に0なので、スクロール位置で比較します 51 var crntTop = $(window).scrollTop(); 52 53 // スクロール位置が要素の間に位置しているか確認します 54 var works = getRange($('#main_top1')); 55 var profile = getRange($('#main_top2')); 56 // 元の画像にする 57 if (crntTop <= works.a) { 58 $('#fixed img').attr('src', 'https://3.bp.blogspot.com/-Ncn2Gj8Aq9k/WwJZjGt-FBI/AAAAAAABMF0/5Uco6MFSragyb_xcDgrfuUFZMfx9diW2gCLcBGAs/s180-c/bird_okameinkogray.png'); 59 } 60 // 記事"Work"の画像にする 61 else if (inRange(crntTop, works)) { 62 $('#fixed img').attr('src', 'https://3.bp.blogspot.com/-dqoq-nN83NM/W1vg19r9wlI/AAAAAAABNrw/IP2DyyofvHgh8Z1weiHaVYZlPkplfZ3hACLcBGAs/s180-c/animal_chara_computer_inu.png'); 63 } 64 // 記事"Profile"の画像にする 65 else if (inRange(crntTop, profile)) { 66 $('#fixed img').attr('src', 'https://3.bp.blogspot.com/-I5omlyOiw04/W1vg2o3hHgI/AAAAAAABNr4/_PpEM8ZROX42aTaNNZQK2_p2JT7Bfp8zgCLcBGAs/s180-c/animal_chara_computer_neko.png'); 67 } 68 }) 69 }); 70</script>
投稿2018/10/26 08:16
編集2018/10/28 00:41退会済みユーザー
総合スコア0
下に１度スクロールして#main_top1の高さで１度画像が変化しましたが、その後スクロール量を変えても変化が見られませんでした。
一度、上のコードをhtmlに張り付けて、ブラウザで開いてみてください（コードは変更しないこと）。一応動いていることが確認できると思います。
そして、asuyan01さんがおっしゃるとおり、上のスクリプトを参考にしても画像が変わらない場合もあると思います。記事の高さがスクリプトが動かないほど短いということはないでしょうか？。
0
jsファイルを下記に変更してみてください
js
1$(function(){ 2 // スクロールした時の処理 3 $(window).scroll(function (){ 4 var works = $('#main_top1 h2').offset().top; // 要素の最上部から距離 5 var profile = $('#main_top2 h2').offset().top; // 要素の最上部から距離 6 var scroll = $(window).scrollTop(); // スクロールした量 7 var windowHeight = $(window).height(); // ウィンドウの高さ 8 if (scroll < works - windowHeight){ // worksが画面下に消えたら 9 $("#fixed img").attr("src","./images/sukuroru.png" ); 10 } else if (scroll < works) { // worksが画面下に入ったら 11 $("#fixed img").attr("src","./images/nav2.jpg" ); 12 } else if(scroll < profile) { // profileが画面下に入ったら 13 $("#fixed img").attr("src","./images/nav3.jpg" ); 14 } 15 }); 16});
投稿2018/10/27 18:26
総合スコア955
あなたの回答
tips
プレビュー
