是否可以使用 jquery 实现反向粘性滚动条？

Question

我正在尝试在网站上创建一种效果，其中使用以下 CSS 将元素固定到浏览器底部：

div.featured-image {
width: 100%;
position: fixed;
z-index: 10;
}

我想要发生的事情是使用类似 http://vertstudios.com/blog/demo/stickyscroller/demo.php 停止项目滚动 UP< /b>超过某一点。我在网站顶部放置了一个绝对定位的徽标，并且如果浏览器不够高，则不希望固定项目与它重叠。所以我试图让它无法滚动超过顶部大约 800px 的缓冲区，但仍然固定在页面底部。

Answer 1

您可以使用 JQuery 并基于 scrollTop() 动态设置/重置元素的顶部和底部 css 属性来实现此目的。

示例 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%;
}

以及一个可用的 fiddle。