jqeury 스크롤 내리다가 특정 영역(부분) 이벤트 발생시키기

 

웹을 개발하다가 보면 스크롤을 내리다가 특정부분이 되면 혹은 특정 div가 나오게 되면 이벤트를 발생시키고 싶어 할 때도 있다. 아닐때도 있고, 갑자기 하고싶을 때도 있다.

 

이때 아래와 같이 사용하게 되면 이벤트를 딱 한번만 발생을 시킬 수 있다.

 

HTML

<div id="wrapper">
    scroll down to see the div
</div>
<div id="tester"></div>

 

CSS

body, html {
    height: 100%;
}

#wrapper {
    height: 400%;
    background: none repeat scroll 0 0 #f99ccc ;
    text-align:center;
    padding-top:20px;
    font-size:22px;
}

#tester {
    padding-top:1200px;    
    height: 600px;
    background: none repeat scroll 0 0 #fff;
    border: 5px solid black;
}

 

JS

var isVisible = false;

$(window).on('scroll',function() {
    if (checkVisible($('#tester'))&&!isVisible) {
        alert("Visible!!!");
        isVisible=true;
    }
});

function checkVisible( elm, eval ) {
    eval = eval || "object visible";
    var viewportHeight = $(window).height(), // Viewport Height
        scrolltop = $(window).scrollTop(), // Scroll Top
        y = $(elm).offset().top,
        elementHeight = $(elm).height();   
    
    if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
    if (eval == "above") return ((y < (viewportHeight + scrolltop)));
}

 

 

 

Result

 

Result에서 보는것과 같이 하얀색 div가 나타나게 되면 alert를 한번만 발생시키게 된다.

 

End of Document