Question

客户已请求将某些模板上的侧边栏粘贴。但是，问题在于有问题的侧边栏有时太高而无法放入浏览器窗口。

我们的想法是，当侧边栏在可视区域之外运行时，它会正常滚动，但只要底部可见，它就会停止。当用户向上滚动时，它会再次启动。

我似乎无法找到任何这种情况的例子。我的google-fu让我失望了。

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

非常感谢任何教程，示例或建议。

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;。

再次编辑：对不起，我重新阅读了这个问题。我将从上面开始，然后你会想要绑定到窗口滚动事件并运行一些测试 - 尝试这样的事情：

$(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
    }
});

希望这会对你有所帮助。

需要有关浮动（粘性）元素的帮助

1 个答案: