[jquery] 스크롤시 특정 영역에서 이벤트

웹에서 스크롤 했을때 특정 요소 (div) 와 같은 영역이 노출될때 뭔가가 나타난다거나 색이 변한다 거나 하는 이벤트를 줄수있다

 

 

 

 

 

 

  var isVisible = false;
  var isVisible2 = false;
 
$('body').scroll(function() {
    if (checkVisible($('.inno_explain .text_box'))&&!isVisible) {
       
      $('.inno_explain .text_box').animate({'opacity':1},2000);
      $('.inno_explain .text_box strong').animate({'margin-bottom':'75px'},500);
        isVisible=true;
    }
   if (checkVisible($('.inno_content_wrap'))&&!isVisible2) {
       
      $('.inno_content_wrap').animate({'opacity':1},2000);
     isVisible2=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)));
}
 

 

 

 

https://blog.voidmainvoid.net/36