Javascript добавить класс на свитке с таймаутом - PullRequest
Новая
       17

Javascript добавить класс на свитке с таймаутом

0 голосов
/ 31 октября 2018

У меня возникли проблемы с добавлением класса, когда указанный класс прокручивается в поле зрения с задержкой между моментами добавления классов.

У меня есть три элемента div, все рядом, все с классом fadeInDownScroll, видимым в коде javascript.

Функция onScrollReach работает, и класс fadeInDown добавляется при достижении прокрутки, но все три элемента div добавляются одновременно.

Ниже приведен код JavaScript, который я пытался заставить работать: 

function onScrollReach(selector, classToBeAdded, offset, delayTime, callback) {
    var didScroll = false;
    var this_top;
    var height;
    var top;

    //If no offset, set one as 0 so that its initialised
    if(!offset) { var offset = 0; } 
    $(window).scroll(function() {
        didScroll = true;
    });
    //Set interval of a tenth of a second, so this will trigger 10 times a second
    setInterval(function() {
        //If they've scrolled within the last 1/10th of a second
        if (didScroll) {

        //Prevent retrigger by setting false
        didScroll = false;
        //Get scroll height
        top = $(this).scrollTop();
        //For each of the selector element (class you're looking for)
        $(selector).each(function(i){
            //Set position of where on page you want it to trigger the event
            this_top = $(this).offset().top - offset;
            height   = $(this).height();

            // Scrolled within current section & doesn't already have the class
            if (top >= this_top && !$(this).hasClass(classToBeAdded)) {
            //=$(this).addClass(classToBeAdded);

            setTimeout(function(){
                console.log(delayTime * (i / 2));
                console.log('class added');
                $(this).addClass(classToBeAdded);
            }, 100);
            //You can call it with a function so tha tyou can do something else straight after
            //This only applies if thats the case
            if (typeof callback == "function") callback(selector);
            }
        });
        }
    }, 100);
}

//Target Class, Class to be added, Offset for scroll, Delay Time
onScrollReach(".fadeInDownScroll", "fadeInDown", 600, 3000, '');

Я знаю, что это тема, в которой есть много похожих сообщений, однако, прочитав многие из них, я не смог найти ту, которая решала бы именно эту проблему

1 Ответ

0 голосов
/ 31 октября 2018

Попробуйте этот обновленный код 

function onScrollReach(selector, classToBeAdded, offset, delayTime, callback) {
    var didScroll = false;
    var this_top;
    var height;
    var top;

    //If no offset, set one as 0 so that its initialised
    if(!offset) { var offset = 0; } 
    $(window).scroll(function() {
        didScroll = true;
    });
    //Set interval of a tenth of a second, so this will trigger 10 times a second
    setInterval(function() {
        //If they've scrolled within the last 1/10th of a second
        if (didScroll) {

        //Prevent retrigger by setting false
        didScroll = false;
        //Get scroll height
        top = $(this).scrollTop();
        //For each of the selector element (class you're looking for)
            //Set position of where on page you want it to trigger the event
            this_top = $(this).offset().top - offset;
            height   = $(this).height();

            // Scrolled within current section & doesn't already have the class
            if (top >= this_top && !$(this).hasClass(classToBeAdded)) {
            //=$(this).addClass(classToBeAdded);

            setTimeout(function(){
                console.log('class added');
                $(selector).addClass(classToBeAdded);
            }, 100);
            //You can call it with a function so tha tyou can do something else straight after
            //This only applies if thats the case
            if (typeof callback == "function") callback(selector);
            }
        }
    }, 100);
}

//Target Class, Class to be added, Offset for scroll, Delay Time
onScrollReach(".fadeInDownScroll", "fadeInDown", 600, 3000, '');
...