CSS/jQuery: Position element at bottom, but scroll up when footer comes into viewport

Question

This may be a semi-duplicate question, but I'm not finding anything that fully addresses what I'm trying to do.

I've got a div with a fixed position, pinned to the bottom of the screen. Its z-index puts it over the main content. As expected, this sticks to the bottom of the screen when I scroll, and its background image partially overlaps the main content..

Here's where it gets tricky: When the footer comes into the viewport, I would like the footer to push it up.

I'm using a jQuery plugin to see when the footer comes into the viewport, and then change the position from fixed to relative. The problem is, when it does this, it jumps down below the main content div.

Here's the plugin: Viewport Selectors for jQuery (Sorry can't post two links yet)

Here's my jQuery

   $(function() {
    $(window).bind('scroll', function(event) {
        $('footer:in-viewport').each(function() {
          $('#extra1').css('position','relative')
        });
        $('#extra2:below-the-fold').each(function() {

        });
    });
});

Here's my example, which isn't completely functional, but gives a good idea of what I'm trying to do: http://illtron.net/test/position/

Also, I'm trying to figure out how to make things go back to the way they were when you scroll back up, and the footer goes below the fold again, but I'm a little confused by the plugin.

Any ideas on how to solve this would be great. I'm open to taking it in a completely different direction if it looks like I'm doing this in a really stupid way.

Answer 1

maybe have a look at this jquery plugin -> http://flesler.blogspot.com/2007/10/jqueryscrollto.html

It's implemented by this website -> http://www.ajax-zoom.com/index.php?cid=examples and as you can see the navigation scrolls down with the page but does not go over the header part of the website when you scroll back up.

Answer 2

I figured this one out. It was one of those trial and error situations, and eventually I got lucky. I had a feeling I would solve it with CSS. If anybody can help me clean up the jQuery, I'd appreciate that. I have a feeling it could be a little more optimized than it is now.

My HTML structure looks roughly like this:

<div id="extra1">
    <div id="extra2"></div>
    <div id="main">Some actual content</div>
</div>
<footer>footer<footer>

My CSS:

#extra1 {position: relative;}
#extra2 {background: url(../wavesiguess.png) bottom center no-repeat;}

.overlay {position: fixed; z-index: 10; height: 285px; width: 100%; bottom: 0;}
.scrolling {position: absolute; height: 285px; width: 100%; bottom: 0;}

My jQuery:

$(function() {
    $(window).bind('scroll', function(event) {
        $('footer:in-viewport').each(function() {
            $('#extra2').removeClass('overlay');
            $('#extra2').addClass('scrolling');
            $('footer').addClass('above');
        });
    });

    $(window).bind('scroll', function(event) {
        $('footer.above:below-the-fold').each(function() {
            $('#extra2').addClass('overlay');
            $('#extra2').removeClass('scrolling');
            $('footer').removeClass('above');
        });
    });
});

Note: My example page is still there, but it's not quite working for some reason, although it does work perfectly on the "real" page. On the example, there's a little jump when the magic happens, probably just from some margin that I can't track down easily.