0

我正在使用航点和窗口来显示面板，就像我创建的小提琴示例一样：

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

一切正常，但我只能通过在面板 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");
    }
});

});
4

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

于 2013-11-11T22:48:04.587 回答