jquery - 需要有关 float (粘性)元素的帮助

Question

一位客户要求将某些模板上的侧边栏设为粘性。然而，问题在于所讨论的侧边栏有时会太高而无法容纳在浏览器窗口中。

我们的想法是，当侧边栏超出可视区域时，它会正常滚动，但一旦底部可见，它就会停止。当用户向上滚动时，它将再次启动。

我似乎找不到任何发生这种情况的例子。我的 google-fu 失败了。

有人对如何实现有任何想法吗？我想我可以使用一些相当简单的 jQuery，但我很难确定要使用哪些 Hook 。

如有任何教程、示例或建议，我们将不胜感激。

Answer 1

我会这样处理:

我假设您的侧边栏容器的 ID 为“侧边栏”

$(document).ready(function() {
    if($('#sidebar').height() < $(window).height()) {
        $('#sidebar').addClass('sticky');
    }
});

然后创建一个名为 sticky 的 css 类，当它没有屏幕那么高时，可以使用任何你想要的属性，例如:

.sticky {
   position:fixed;
   left:0;
   top:0;
}

编辑:如果粘性类没有覆盖您在#sidebar 上设置的 css，请使用 position:fixed !important;。

再次编辑:抱歉，我重新阅读了问题。我会从上面的开始，然后你会想要绑定(bind)到窗口滚动事件并运行一些测试 - 尝试这样的事情:

$(window).bind("scroll", function(){
    if($('#sidebar').offset().top - $("html").scrollTop() < 0) {
        //the top of the sidebar has scrolled above the top of the viewport
    } else {
        //the top of the sidebar is still below the top of the viewport
    }
});

希望对你有帮助。