使用 jquery 的反向粘性滚动条是否可能？

【问题标题】：Is a reverse sticky scroller using jquery possible?使用 jquery 的反向粘性滚动条是否可能？
【发布时间】：2011-08-03 18:23:56
【问题描述】：

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

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

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

【问题讨论】：

标签： jquery fixed sticky-footer

【解决方案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。

【讨论】：