Я использую путевые точки и окна для отображения панелей, например, на примере скрипта, который я создал:
Все работает правильно, но я смог достичь этого, используя номера идентификаторов на панелях 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");
}
});
});
Вам просто нужно зациклиться на всех существующих панелях:
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/