CODEWITHSUNDEEP
javascriptjqueryhtml
Adam
Adam

Reputation: 832

jQuery waypoints static html/ js issue

I'm using waypoints and windows to show the panels like on the fiddle example I have created:

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

Everything is working correctly but I was only able to achieve this by using id numbers on the panel divs, the issue is there could be varying amounts of panels so I cant use static id's

Does anyone know how I can tweak my js so I dont have to set id numbers on the panels?

Any help is appreciated, thanks

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

});

Upvotes: 0

Views: 45

Answers (1)

Renato Zannon
Renato Zannon

Reputation: 29971

You just need to loop on all existing panels:

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

Updated jsFiddle (with 4 panels and no ids): http://jsfiddle.net/6bMMa/2/

Upvotes: 1

Related Questions