Статическая html / js проблема путевых точек jQuery

0

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

http://jsfiddle.net/6bMMa/1/

Все работает правильно, но я смог достичь этого, используя номера идентификаторов на панелях div, проблема в том, что могут быть разные количества панелей, поэтому я не могу использовать статические идентификаторы

Кто-нибудь знает, как я могу настроить мои js, поэтому мне не нужно устанавливать идентификационные номера на панелях?

Любая помощь приветствуется, спасибо

$(function () {
var scrollPos = 0;
var trigger = scrollPos + 300;
var $windows = $('.panel');

panel1 = 0;
panel2 = 0;

$(window).scroll(function () {
    scrollPos = $(this).scrollTop();

    panel1 = $('.panel:eq(1)').ratioVisible();
    panel2 = $('.panel:eq(2)').ratioVisible();

    if (panel1 > 0.2) {
        $("#1").addClass("show");
    }
    if (panel1 < 0.1) {
        $("#1").removeClass("show");
    }
    if (panel2 > 0.2) {
        $("#2").addClass("show");
    }
    if (panel2 < 0.1) {
        $("#2").removeClass("show");
    }
});

});
Теги:

1 ответ

1
Лучший ответ

Вам просто нужно зациклиться на всех существующих панелях:

var $windows = $('.panel');

$(window).scroll(function () {
    $windows.each(function() {
        var $panel = $(this);
        var ratioVisible = $panel.ratioVisible();

        if(ratioVisible > 0.2) {
            $panel.addClass("show");
        }

        if(ratioVisible < 0.1) {
            $panel.removeClass("show");
        }
    });
});

Обновлен jsFiddle (с 4 панелями и без идентификаторов): http://jsfiddle.net/6bMMa/2/

  • 0
    Ааа, круто, спасибо большое!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню