통합검색

javascript

[Jquery] 스크롤 시 해당 영역에 class 추가

[!]CSS[/!]
 
@media screen and (min-width: 1300px){

    /* action */
    #main-group .tt > * {opacity: 0;top: -50px;}
    #main-group.active .tt > * {opacity: 1;top: 0;}
    #main-group.active .tt > h3 {transition: all 0.5s 0s;}
    #main-group.active .tt > p {transition: all 0.5s 0.5s;}
    #main-group.active .tt > span {transition: all 0.5s 1s;}
    #main-group.active .tt > a {transition: all 0.5s 1.5s;}

}



[!]jquery[/!]
//scroll section active
section_active = {
    'init' : function(){
        this.action();
    },
    'action' : function(){
        var $ele = {
            'ani' : $('._ani'),
            'win' : $(window),
        }
        $ele.win.on('load scroll', function(){
            $ele.ani.each(function(i){
                if( ( $ele.win.scrollTop() + ($ele.win.height() / 2) ) > $ele.ani.eq(i).offset().top ){
                    $(this).addClass('active');
                }else{
                    $(this).removeClass('active');
                }
            });
        });
    }
}
$(function(){
    if($('#main ._ani').length>0){
        section_active.init();
    }
})




참고 사이트 : 저스트그룹