How do I make a fixed div of text change as content changes?

Question

I have a page where my content, which are images, scrolls down and has a fixed title on the side. I require the title on the side which is a fixed div, to change as the images roll up, to describe each image.

Please see http://kimcolemanprojects.com/artworks.html

thanks for any advice on how to achieve this.

angela

Answer 1

I've written some weeks ago a simple jQuery expression, so here's a simple solution that fits to your requirements...

jQuery expression

jQuery.expr.filters.inView = function(el) {
    var width = $(el).width(),
        height = $(el).height(),
        offset = $(el).offset(),

        vp_dimensions = {
            height: $(window).height(),
            width: $(window).width()
        },
        y_offset = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop),
        x_offset = (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);

    return (
    offset.top < (y_offset + vp_dimensions.height) && offset.left < (x_offset + vp_dimensions.width) && (offset.top + height) > y_offset && (offset.left + width) > x_offset);
};

Scroll Event

$(window).scroll(function() {

    $('li').each(function() {
        var self = $(this),
            title = self.prev('.title').text();
        if (self.is(':inView')) {
            $('#title').find('h2').text(title);
        }
    });

}).scroll();

Fiddle

Update

To do it a bit nicer I've removed your placeholder .title's and added its contents to your img-alt attributes:

$(window).scroll(function() {

    $('li').each(function() {
        var self = $(this),
            title = self.find('img').attr('alt');
        if (self.is(':inView')) {
            $('#title').find('h2').text(title);
        }
    });

}).scroll();

And your new HTML:

<div id="header">
    <div id="title">
        <h2>Untitled 1</h2>
    </div>
</div>
<div id="main" class="main">
    <ul>
        <li id="1">
            <a onClick="goToByScroll('2')" href="javascript:void(0)"><img src="Untitled17.jpg" alt="Unititled 1"></a>
        </li>
        <li id="2">
            <a onClick="goToByScroll('3')" href="javascript:void(0)"><img src="Untitled9.jpg" alt="Unititled 2"></a>
        </li>
        <li id="3">
            <a onClick="goToByScroll('4')" href="javascript:void(0)"><img src="Frame2.jpg" alt="Unititled 3"></a>
        </li>
        <li id="4">
            <a onClick="goToByScroll('1')" href="javascript:void(0)"><img src="Untitled2.jpg" alt="Unititled 4"></a>
        </li>
    </ul>
</div>

Fiddle

UPDATE

I've rebuild your link anchors and removed the "inline-onclick"-events:

Complete Site - Fiddle