Is a reverse sticky scroller using jquery possible?

I'm trying to create an effect on a website where an element is fixed to the bottom of the browser using the following CSS:

div.featured-image {
width: 100%;
position: fixed;
z-index开发者_如何学Python: 10;
}

and what I want to happen is to use something like this http://vertstudios.com/blog/demo/stickyscroller/demo.php to stop the item from scrolling UP past a certain point. I have a logo placed at the top of the site positioned absolutely, and don't want the fixed item to overlap it if the browser is not tall enough. So I'm trying to get it to not be able to scroll past a buffer of around 800px at the top, but still stay fixed at the bottom of the page.

You could do this with JQuery and dynamically setting/resetting the top and bottom css properties of the element based on a scrollTop().

Sample JQuery:

$('#footer').css('top','550px'); 
$(document).bind('scroll',function(event) {
    var scrollTop = $(window).scrollTop();
    if (scrollTop <= 550) { 
        $('#footer').css('bottom',''); 
        $('#footer').css('top','550px'); 
    } else {
        $('#footer').css('top',''); 
        $('#footer').css('bottom','0px');
    }
});

CSS (for div#footer):

#footer{
    position: fixed;
    left: 0px;
    display: block;
    background-color: green;
    z-index: 10;
    height: 100px;
    width: 100%;
}

And a working fiddle.