CODEWITHSUNDEEP
javascriptjqueryfor-loopscrolloffset
Kyle Shevlin
Kyle Shevlin

Reputation: 277

jQuery: Using scroll() and offset() to change background

I am designing a website where the background sits in a div that has a negative z-index with position:fixed. I then have section divs that scroll over it. My goal is to change the background image when each section's top position is passed by the scrollTop function. My jQuery code currently creates an array of each sections top position using:

var secTops = [];

$('section').each(function(i) {
    var t = $(this).offset();
    secTops.push(t.top);
});

I then thought I would create a variable upon scroll() that was the scrollTop() position like so:

$(window).scroll(function() {
    var winTop = $(this).scrollTop();
});

But here is where I am stuck. The best I can come up with (which doesn't work right) is this:

for (i = 0; i < $('section').length; i++) {
    var pos = secTops[i];
    if (winTop < pos) {
        $('#background').css('background', bgFront + (i+1) + bgBack);
    } else {
        $('#background').css('background', bgFront + (i+2) + bgBack);
    };
};

But this isn't right. You can disregard the second half of my .css() function. I've created variables and labeled my images appropriately, so i know that works. Right now, the for loop runs through the entire iteration and is stuck at the full section.length and thus only flips between 2 background images. I need this to constantly check my winTop variable against the top positions of my sections and change the background accordingly. I could do this with a lot of if/then, or maybe even a lengthy switch, but there has to be a cleaner way to do this. Can anyone help me out here?

Here's a JSFiddle that uses colors instead of images but shows the same problems. http://jsfiddle.net/kyleshevlin/5N5WU/1/

Upvotes: 0

Views: 526

Answers (1)

LorDex
LorDex

Reputation: 2636

this has no chance to work. you need to change it to something like this (this is kinda pseudocode, just to give you a picture: 

sections = [];
$(document).ready(function() {
    $('section').each(function() {
        sections.push($(this))
    });
})

$(window).scroll(function() {
    var s = $(window).scrolTop();
    var currentIndex;

    for ( var i = 0; i < sections.length; i++) {
        if (( s > sections[i].offset().top) && ( s <= sections[i+1].offset().top)) {
            currentIndex = i;
        }
    }
    $('#background').css('background', bgFront + (i+1) + bgBack);
})

Upvotes: 1

Related Questions