Edited at

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

More than 1 year has passed since last update.


jQuery

$(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エフェクトをつける

<div class="target">

<p>hogehoge</p>
</div>

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

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

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
}
}

.fadeIn {

opacity: 1.0;
transition: all 2s ease;
}
.fadeOut {
opacity: 0;
transition: all 0.1s ease;
}


参考資料

http://logic.moo.jp/data/archives/879.html