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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

2回答

2768閲覧

jQueryでのスクロール位置の取得

tetsug

総合スコア13

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

2クリップ

投稿2016/01/26 01:45

画面上に絶対表示させている画像の切り替えを位置に応じて行いたいのですが
タブレットやスマートフォンのように表示がまちまちの場合は
どれくらいのpxをスクロールしたかで切り替えるという方法がうまくいきません。

例えば下記のように4つのボックスがあるとして
上記の方法だと仮に#box01の高さが800px、#box02の高さが1000pxだとしたら
0pxから800pxまでは画像Aを表示、801pxから1800pxまではBの画像を表示というような挙動になります。

こういった方法ではなくそれぞれボックスの1番上が絶対表示の画像に差し掛かったときに
切り替えることができれば環境を問わず期待した位置で切り替えられると思うのですが
jQueryでどのように実装したらよいでしょうか。

<div id="box01"> コンテンツ(文章や画像など) </div> <div id="box02"> コンテンツ(文章や画像など) </div> <div id="box03"> コンテンツ(文章や画像など) </div> <div id="box04"> コンテンツ(文章や画像など) </div>

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答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
orange0190

総合スコア1698

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

tetsug

2016/01/26 03:36

さっそくありがとうございます。 画面の上部より200pxくらいのところで画像を表示させたかったので 正しいかどうか分かりませんが以下のようにして試してみました。 if($("#box02").offset().top - scrollTop -200 < 0) #box01の上端でAの画像、#box02の上端でBの画像が表示されたのですが スクロールを上に戻してもそのまま表示されていることに気が付きました。 この場合、boxの下端も取得して「#box02の上端から下端まではBの画像(#box01の下端はAの画像)」のようにするのか あるいは環境によってboxの高さが変わってしまうので「#box02の1px上からはAの画像、#box03の1px上からはBの画像」 のような方法でできそうな気がするのですが、具体的な書き方までは分かりませんでした。
guest

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では下記のような手順にすれば上手く動作しそうです。

  1. #box~のある位置を取得しておく
  2. スクロールの度にどのボックスの位置より下にきているかを調べる
  3. 該当するボックスの位置に来ている時、対象の画像のクラスをactiveにする
  4. 画面がリサイズされた時に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

KiKiKi_KiKi

総合スコア596

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問