40
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

要素が画面内にあるかどうかの判定

Last updated at Posted at 2017-01-19

#jQuery

.js
$(window).scroll(function(){
  var t = $('.form').offset().top; // ターゲットの位置取得
  var p = t - $(window).height();  // 画面下部からのターゲットの位置
  if($(window).scrollTop() > p){
    $('.button').hide(); // ボタンを非表示
  }else{
    $('.button').show(); // ボタンを表示
  }
})

$('要素名').offset().top : 要素の位置を取得
$(window).height() : 画面の高さを取得
$(window).scrollTop() : 画面トップのスクロールされた距離を取得

#js(複数判定)
※fadeinとfadeoutエフェクトをつける

.html
<div class="target">
  <p>hogehoge</p>
</div>

<div class="non-target">
  <p>hogehoge</p>
</div>

<div class="target">
  <p>hogehoge</p>
</div>
.js
window.addEventListener('load', handleEffect())
window.addEventListener('scroll', this.handleEffect())

function handleEffect(){
  // get el
  let target = document.getElementsByClassName('target')

  for (var i = 0; i < target.length; i++) {
    console.log('i',i)
    let t_height = target[i].offsetHeight
    let t_classN = target[i].className

    // get target-position => distance from screen-top-position
    let offsetY = target[i].getBoundingClientRect().top

    // screen-height
    let screenHeight = window.outerHeight

    // judge of target-position in or out
    let t_position = offsetY - screenHeight


    // console.log('target = ', target)         : ターゲット一覧
    // console.log('t_height = ', t_height)     : ターゲットの高さ
    // console.log('offsetY = ', offsetY)       : スクリーン上部からターゲットまでの距離
    // console.log('t_position = ', t_position) : スクリーン下部からターゲットまでの距離


    /*
     * 1. -screenHeight <= (t_position + t_height ) : スクリーン上部とターゲットの下部までの距離
     *    ※マイナスなのは、スクリーン内に入るとt_positionはマイナスになるため
     *    
     * 2. t_position < 0 : スクリーン下部からターゲットまでの距離が、0未満 => スクリーン内に到達
     *  
     */
    if(-screenHeight<=(t_position + t_height) && t_position<0) { // 画面内
      if(t_classN.indexOf('fadeIn') == -1) { // fadeInなし
        t_classN = t_classN + ' fadeIn'      // fadeInクラス追加
      }else if(t_classN.indexOf('fadeOut') !== -1) {
        t_classN = t_classN.replace(/fadeOut/g, 'fadeIn') // fadeInに置き換え
      }
    } else { // 画面外
      if(t_classN.indexOf('fadeOut') == -1) { // fadeoutなし
        t_classN = t_classN + ' fadeOut'
      }else if(t_classN.indexOf('fadeIn') !== -1) {
        t_classN = t_classN.replace(/fadeIn/g, 'fadeOut') 
      }
    }
    target[i].className = t_classN
  }
}
.css
.fadeIn {
  opacity: 1.0;
  transition: all 2s ease;
}
.fadeOut {
  opacity: 0;
  transition: all 0.1s ease;
}

#参考資料
http://logic.moo.jp/data/archives/879.html

40
38
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
40
38

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?