제이쿼리 스크롤+애니메이션 공통클래스로 효과 주기

 

 

 

 

 

'[class*=animate_fade]' 

animate_fade 를 포함하는 

 

 

.each 

각각 선택하여 반복하라

 

 

 

 

 

 

      var st = $(this) 윈도우임 wiondow 가능

 

 

 

 

 

이만큼을 높이를 빼줘야한다.

스크롤 애니메이션 시 화면을 키자마자 보이는 스크롤 값 만큼 빼줘야 한다.

 

$(function () {

  $('[class*=animate_fade]').each(function () {

    // each안에서 $(this)는 앞에서 선택된 요소

    var _this = $(this);

    $(window)

      .on('scroll', function () {

        var posY = _this.offset().top;

        var st = $(this).scrollTop();

        console.log(posY, st);

        if (st >= posY - $(this).outerHeight() + 150) {

          _this.addClass('on');

        } else {

          _this.removeClass('on');

          // 올렸을때 초기화

        }

      })

      .trigger('scroll');

  });

});