Javascript/jQuery

스크롤하여 객체가 화면에서 보일때 addClass 하기

 function addLoadClass() {
        var _windowW = $(window).outerWidth();
        var _windowH = $(window).outerHeight();

        var _getScrollObjY = function () {
            var scrollArray = [];
            var pHeight = 300;
            $("#ctt_ul img").each(function (index) {
                scrollArray.push(parseInt($("#ctt_ul img").eq(index).offset().top) + pHeight);
            });
            return scrollArray;
        }

        // scrollMotion
        if ($("#ctt_ul li").length != 0) {
            $("#ctt_ul li").each(function (index) {
                if ($("#ctt_ul li").eq(index).css('display') != "none" && $(window).scrollTop() + $(window)
                    .height() > _getScrollObjY()[index]) {

                    if (!$("#ctt_ul li").eq(index).hasClass("load")) {
                        var row = $(this);
                        setTimeout(function () {
                            row.addClass("load");
                        }, 100*index); //delay 시간

                    }
                };
            });
        }
    }

 

728x90
반응형