画面上に絶対表示させている画像の切り替えを位置に応じて行いたいのですが
タブレットやスマートフォンのように表示がまちまちの場合は
どれくらいのpxをスクロールしたかで切り替えるという方法がうまくいきません。
例えば下記のように4つのボックスがあるとして
上記の方法だと仮に#box01の高さが800px、#box02の高さが1000pxだとしたら
0pxから800pxまでは画像Aを表示、801pxから1800pxまではBの画像を表示というような挙動になります。
こういった方法ではなくそれぞれボックスの1番上が絶対表示の画像に差し掛かったときに
切り替えることができれば環境を問わず期待した位置で切り替えられると思うのですが
jQueryでどのように実装したらよいでしょうか。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答2件
0
scrollTop()
とoffset()
を利用してできます。
次のような感じです。
javascript
1$(function(){ 2 $(window).on("scroll", function(e){ 3 var scrollTop = $(window).scrollTop(); 4 if($("#box01").offset().top - scrollTop < 0){ 5 //画像Aを表示 6 } 7 if($("#box02").offset().top - scrollTop < 0){ 8 //画像Bを表示 9 } 10 if($("#box03").offset().top - scrollTop < 0){ 11 //画像Cを表示 12 } 13 if($("#box04").offset().top - scrollTop < 0){ 14 //画像Dを表示 15 } 16 }); 17});
動作未検証ですので、ご注意ください。
追記
どのようなHTMLなのかが分かりかねるので、正確なことは書けませんが、画像を消す処理を入れればいいのではないですか?
javascript
1$(function(){ 2 $(window).on("scroll", function(e){ 3 var scrollTop = $(window).scrollTop(); 4 $("img").remove() //imgタグを削除 5 if($("#box01").offset().top - scrollTop < 0){ 6 //画像Aを表示 7 } 8 if($("#box02").offset().top - scrollTop < 0){ 9 //画像Bを表示 10 } 11 if($("#box03").offset().top - scrollTop < 0){ 12 //画像Cを表示 13 } 14 if($("#box04").offset().top - scrollTop < 0){ 15 //画像Dを表示 16 } 17 }); 18});
投稿2016/01/26 02:37
編集2016/01/26 03:54総合スコア1698
0
仮に画像を表示させる絶対表示領域が下記のようなHTML・CSSだったとします
html
1<div id="imageArea"> 2 <img class="img img-1" src="" alt="画像A"> 3 <img class="img img-2" src="" alt="画像B"> 4 <img class="img img-3" src="" alt="画像C"> 5 <img class="img img-4" src="" alt="画像D"> 6</div>
css
1#imageArea .img { 2 display: none; 3} 4#imageArea .active { 5 display: inline; 6}
javascriptでは下記のような手順にすれば上手く動作しそうです。
- 各
#box~
のある位置を取得しておく - スクロールの度にどのボックスの位置より下にきているかを調べる
- 該当するボックスの位置に来ている時、対象の画像のクラスを
active
にする - 画面がリサイズされた時に1.を再取得する
動作検証していない&説明のために冗長な書き方をしたものを参考までに記載します。
javascript
1$(function() { 2 // ボックスのポジションを取得する関数 3 var getBoxPositions = function() { 4 var boxNum = 4, 5 arg = []; 6 for(var i=0; i<boxNum; i+=1) { 7 var boxID, 8 parfix = "#box"; 9 if(i < 10) { 10 boxID = parfix + "0" + (i + 1); 11 } else { 12 boxID = parfix + (i + 1); 13 } 14 arg[i] = $(boxID).offset().top; 15 } 16 return arg; 17 }; 18 19 // スクロール位置からアクティブなエリアを調べてそのIndexを返す関数 20 // 該当エリアがない時は -1 を返す 21 var getActiveAreaIndex = function(st, boxPos) { 22 // margin ... boxの上部よりNpx上のスクロール位置になった切り替える 23 // このサンプルではboxの上部より100px上になった時点で切り替える想定です 24 var margin = 100, 25 n = boxPos.length; 26 activeAreaIndex = -1; 27 st += margin; 28 if(st < boxPos[0]) { 29 console.log('該当エリアなし'); 30 } else { 31 while(n--) { 32 if(st > boxPos[n]) { 33 break; 34 } 35 } 36 console.log("box" + (n+1) ); 37 activeAreaIndex = n; 38 } 39 return activeAreaIndex; 40 }; 41 42 // 画像を切り替える関数 43 var changeImageByBoxIndex = function(index) { 44 var $imageArea = $('#imageArea'), 45 imgPrefix = '.img-'; 46 active = 'active'; 47 // アクティブのものを非表示にする 48 $imageArea.find('.' + active).removeClass(active); 49 // 該当エリアがあるときだけ画像を表示させる 50 if(index > -1) { 51 return $imageArea.find(imgPrefix + (index + 1)).addClass(active); 52 } 53 }; 54 55 !function(w, d) { 56 var $w = $(w), 57 timer, 58 boxPos = []; 59 $w.on('resize', function() { 60 // 画像リサイズ時に 各box のポジションを再取得 61 boxPos = getBoxPositions(); 62 console.log(boxPos); 63 }) 64 .on('scroll', function() { 65 clearTimeout(timer); 66 timer = setTimeout(function() { 67 var st = $w.scrollTop(); 68 changeImageByBoxIndex( getActiveAreaIndex(st, boxPos) ); 69 }, 100); 70 }) 71 .trigger('resize'); 72 }(window, document); 73});
投稿2016/02/02 11:54
総合スコア596
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/01/26 03:36
2016/01/26 03:54