Question

我正在使用航点和窗口来显示我创建的小提琴示例中的面板：

一切正常但我只能通过在面板div上使用id号来实现这一点，问题是可能有不同数量的面板所以我不能使用静态id

有谁知道如何调整我的js所以我不必在面板上设置id号码？

感谢任何帮助，谢谢

$(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");
    }
});

});

Answer 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个面板，没有ID）：http://jsfiddle.net/6bMMa/2/

jQuery waypoints静态html / js问题

1 个答案: