- 締切済み
画面スクロール時、ある要素が画面上に表示されているかどうかを判定したい
こんにちわ。 現在、jQuery, WordPressを使用してブログサイトを構築しております。 質問なのですが、スクロールをして特定の記事が画面上に表示された(画面内に少しでも表示された場合も)時にコードを実行したいと考えているのですが、なにか良い方法はありますでしょうか?画像のライブラリでLazy loadという、領域に入った場合に初めて画像をロードするものがありますが、それと同じように具体的には領域に入ったときにテキストをフェードインしたいと考えております。ご教示いただければ幸いです。宜しくお願い致します。
- みんなの回答 (2)
- 専門家の回答
みんなの回答
- babu_baboo
- ベストアンサー率51% (268/525)
#No.1です。あんまりひどいこーどなので、はずかしくなりました。 つねにaをしらべるってのもむだなんだけど・・・。 つめが、いつもあまい!とおこられそうですが・・・。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> div { margin:200px 0px; } .big { font-size:100px;} </style> <body onScroll="checker();"> <div class="big">ばぶぅ~!</div> <div>abc</div> <div>abc</div> <div>abc</div> <div id="a" class="big">赤字に!</div> <div>abc</div> <div>abc</div> <script type="text/javascript"> function checker() { if (this.f) return; if (this.f = hasInnerView('a')) ColorChanger('a', '#000', '#f00', 100, 20); } function hasInnerView (eId) { var d = document; var db = d.body; var y0 = d.documentElement.scrollTop || db.scrollTop; var y1 = y0 + d.documentElement.clientHeight || db.clientHeight || db.scrollHeight; var t = document.getElementById(eId); var t0 = getPosition(t)[1]; var t1 = t0 + t.offsetHeight; return (y0<t0 && t1<y1); } function getPosition(node) { var x = 0, y = x; do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent) return [x,y]; } function ColorChanger (eid, col1, col2, step, time) { var s = document.getElementById(eid).style; //if (! s) return; var c1 = getEachColor(col1); //if (! c1[0]) return; var c2 = getEachColor(col2); //if (! c2[0]) return; var c3 = [(c2[0] - c1[0]) / step, (c2[1] - c1[1]) / step, (c2[2] - c1[2]) / step]; var i = 0; return function _() { s.color = 'rgb(' + (c1[0]|0) + ',' + (c1[1]|0) + ',' + (c1[2]|0) + ')'; c1[0] += c3[0], c1[1] += c3[1], c1[2] += c3[2]; i++ < step && setTimeout (_, time); }(); } function getEachColor(RGB) { var v = new Array(3); if (RGB != undefined) { if (/^#[0-9A-F]{3}$/i.test(RGB)) { v = eval(RGB.replace(/^#([0-9A-F])([0-9A-F])([0-9A-F])/i, '[0x$1$1,0x$2$2,0x$3$3]')); } else if (/^#[0-9A-F]{6}$/i.test(RGB)) { v = eval(RGB.replace(/^#([0-9A-F]{2})([0-9A-F]{2})([0-9A-F]{2})/i, '[0x$1,0x$2,0x$3]')); } } return v; } </script>
- babu_baboo
- ベストアンサー率51% (268/525)
だれもふれないところをみると、これはじらいなのか? よくわからないけど、もうすでにごみ。 りょういきのしゅとくが、なにがなんだかわからないまま こぴぺしたので、しらべてね。 ばぶ~。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <title>TEST</title> <style type="text/css"> div { margin:20em 0em; } </style> <body onScroll="p();"> <div>abc</div> <div>abc</div> <div>abc</div> <div>abc</div> <div id="a">見えたらalert!</div> <div>abc</div> <div>abc</div> <div>aabc</div> <script type="text/javascript"> var d = document; var db = d.body; var t = document.getElementById('a'); var t0 = getPosition(t)[1]; var t1 = t0 + t.offsetHeight; function getPosition(node) { var x = 0, y = x; do x += node.offsetLeft, y += node.offsetTop; while (node = node.offsetParent) return [x,y]; } function p() { var y0 = d.documentElement.scrollTop || db.scrollTop; var y1 = y0 + d.documentElement.clientHeight || db.clientHeight || db.scrollHeight; if (y0<t0 && t1<y1) alert("でた~"); } </script>
補足
ご回答ありがとうございます。 説明が不足していましたが、例えば、ブログコンテンツの投稿記事が画面上に表示されるとフェードイン、画面からはなれるとフェードアウトといった動作をしたいので、特定のidの判定をするのではなく、つねにすべての記事の判定をしたいと考えております。 とはいえ参考になりました。ありがとうございます。