jquery - Is a reverse sticky scroller using jquery possible?

Question

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: 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.

Answer 1

您可以使用 JQuery 执行此操作，并css基于scrollTop().

示例 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（用于 div#footer）：

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

和一个工作小提琴。