Как добавить класс при прокрутке?

Question

[Nazaror]

У меня есть линия на которой циферки, нужно при прокрутке каждой цифре добавить класс scroll.
Вот HTML

<div class="line"><img src="img/line.png" alt=""></div>
    <div class="number ">01</div>
    <div class="number">02</div>
    <div class="number">03</div>
    <div class="number">04</div>
    <div class="number">05</div>

И такой JQuerry

var a = $(".line");
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos + 770 >= a.offset().top && windowpos <= a.offset().top + a.height()-70) {
        $(".number").addClass("scroll");

    } else {
        $(".number").removeClass("scroll");
    }
});

Как сделать, что бы при прокрутке класс изменялся только тому что по центру экрана? А то у меня всем одновременно фигачит. Только как первый по-центру, всем добавляет класс scroll

Answer 1

[v3shin]

$(".number").eq(_X_).addClass("scroll");
А значение _X_ вам надо вычислить самому.

Comments

[Bartf]

То что ставлю вместо Х просто выбирает элемент с таким же номером. Ставлю 2, второму элементу класс добавляет и все.

[v3shin]

Bartf, вычисляйте _X_ заново при каждой прокрутке.

[Bartf]

v3shin, как?
Я так пытался, немного по-другому. Но не работает.

var a = $(".line");
$(window).scroll(function() {
    var windowpos = $(window).scrollTop();
    if (windowpos + 770 >= a.offset().top && windowpos <= a.offset().top + a.height()-70) {
        // $(".number").addClass("scroll");
        $('.number').each(function(){
            $(this).addClass("scroll");
                });
    } else {
        $(".number").removeClass("scroll");
    }
});

[v3shin]

$(".number").eq(Math.floor(windowpos / $(window).height())).addClass("scroll");

Например, так. Я не имею ни малейшего понятия, как у вас устроена страница.

[Bartf]

v3shin, Так не работает, а как изменить под себя я еще не знаю

[v3shin]

Bartf, тогда могу только пожелать успехов в изучении js.

[Дима Долготер]

залей на кодепен посмотрим что там)