jQuery・スクロールイベントでよく使う基本的な3つの .offset().top [IE7対応]
Webサイト制作でちょくちょく使っているスクロールイベントの offset().top 3つ。
検証済みブラウザとOS
- IE 7～
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
- iOS 9
- Android 4.1 / 5
共通コード
- 対象要素は section 直下の div
- 発火要素は .active
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <section> <h1>テキスト</h1> </section> <section id="block-01"> <div> <p>テキスト</p> <img src="images/ph_001.jpg" width="800" height="500" alt=""> </div> <!-- /#block-01 --></section> <section id="block-02"> <div> <p>テキスト</p> <img src="images/ph_002.jpg" width="800" height="500" alt=""> </div> </section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/offsettop.js"></script> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | section { min-height: 100%; padding: 30px; div { position: relative; left: -100px; transition: 0.5s ease-out; @include opacity(0); } .active { transform: translateX(100px); @include opacity(1); } } #block-01 {background: lighten(black, 95%);} #block-02 {background: lighten(pink, 10%);} |
対象要素がウィンドウ内に現れたら発火して終了
1 2 3 4 5 6 7 8 9 10 11 12 | $(function() { var block = $("section >div"), Window = $(window); Window.scroll(function() { block.each(function() { if (Window.scrollTop() > $(this).offset().top - Window.height()) { $(this).addClass("active"); } }); }); }); |
対象要素がスクロールバーより下へ行き、ウィンドウ内から消えたら元に戻る
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | $(function() { var block = $("section >div"), Window = $(window); Window.scroll(function() { block.each(function() { if (Window.scrollTop() > $(this).offset().top - Window.height()) { $(this).addClass("active"); } else { $(this).removeClass("active"); } }); }); }); |
対象要素トップから指定した高さが、ウィンドウトップに到達したら発火
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | $(function() { var block = $("section >div"), Window = $(window); Window.scroll(function() { block.each(function() { if (Window.scrollTop() > $(this).offset().top - 500) { $(this).addClass("active"); } else { $(this).removeClass("active"); } // else if (Window.scrollTop() < $(this).offset().top + 500) { // $(this).removeClass("active"); // } }); }); }); |
コメントを投稿する