horizontal scroll, detecting scroll position relative to anchors

Question

Ok, I\'m building a horizontal scroll website for a photographer. We have some really nice wireframes done and I\'m looking to create a neat effect where it highlights the

Answer 1

The task involves detecting Image position, scroller position, and knowing your images width. With jQuery you'll need to use scrollLeft(), position(), width(), and the scroll() event

Here's how you do it.

var $div = $('div'),
    divleft = $div.position().left;
$('div').scroll(function() {
    $('img').each(function() {
        img = $(this);
        imgleft = img.position().left;
        if (imgleft > divleft && imgleft + img.width() < divleft + $div.width()) {
            $(this).css({
                opacity: '1'
            })
        } else {
            $(this).css({
                opacity: '0.2'
            })
        }
    });
})

Check example at http://jsfiddle.net/Vy33z/4/