Add CSS only when a section or is in range

Question

I am trying to make a "sticky" image where all images of class ".img" add a css attribute and then remove it when it is not in range.

I do this by getting the ID of each of the images and pass it to a function that makes it fixed (addCSS). It works fine - the images stick right where they are supposed to smoothly, but when I try to scroll up, they keep their css. I want to remove the CSS property when the wScroll is outside the range.

$('.img').each(function () {
        var sectionOffset = $(this).offset().top;
        var attID = $(this).attr('id');attID = $("#"+attID.toString()+"");
        if (wScroll >= sectionOffset && wScroll <= (sectionOffset + sectionHeight)) {
            addCSS(attID);
        }
    });
function addCSS(element) {
        element.css({
            'position': 'fixed',
            'top': stickyPosition - 75,
            'left': OffsetLeft
        });
    }
function removeCSS(element) {
        element.css({
            'position': '',
            'top': '',
            'left': ''
        });
}

I tried modifying it this way but it makes it jump :(

$('.img').each(function () {
        var sectionOffset = $(this).offset().top;
        var attID = $(this).attr('id');attID = $("#"+attID.toString()+"");
        if (wScroll >= sectionOffset && wScroll <= (sectionOffset + sectionHeight)) {
            addCSS(attID);
        }
        else if (wScroll > (sectionOffset + sectionHeight) || wScroll < sectionOffset) {
            removeCSS(attID);
        }
    });

I managed to get it working smoothly without using an array, but the code is a bit long and I was hoping to simplify it without losing function.

Here is a simplified version: http://codepen.io/ebevers/pen/xwbdbP for this, I just need the squares to jump back into place. Thanks!

Answer 1

Try this:

// Last section and current section
var last_section = -1;
var current_section = -1;

// Scroll
jQuery(window).scroll(function(){

    // Get current section
    for (var i = 0; i < jQuery('.row').length; i++) {
        if (jQuery(this).scrollTop() >= jQuery('.row:eq('+i+')').position().top) {
            current_section = i;
        }
    }

    // If change
    if (current_section != last_section) {
        removeCSS(jQuery('.row:eq('+last_section+') .img'));
        addCSS(jQuery('.row:eq('+current_section+') .img'));
        last_section = current_section;
    }

});

http://jsfiddle.net/c4z9satw/