Question

下面是用户在滚动时修复侧边栏的代码。截至目前，它与我的页脚重叠。如何让它在某一点停止或何时撞到页脚？

<script type="text/javascript">
    $(document).ready(function() {
    if ($('.pageheaderwrap').length) {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 362) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "255px"
                });
            }
        });
    } else {
        $(window).scroll(function() {
            if ($(this).scrollTop() > 230) {
                $(".sidebar-left").css({
                    "position": "fixed",
                    "top": 0
                });
            } else {
                $(".sidebar-left").css({
                    "position": "absolute",
                    "top": "125px"
                });
            }
        });
    }
});
</script>

Answer 1

这可能对你有用：

http://jsfiddle.net/y3qV5/7/

正在执行此操作的jquery插件设置了固定页面顶部边距的元素。使用可选限制，它将取消固定元素并让它继续向上滚动页面，使其远离页脚。您可以将限制设置为页脚顶部，加上目标元素的高度。

以下是此场景的代码用法（上面的小提琴）：

$(document).ready(function() {
    $('#cart').scrollToFixed({
        marginTop: 10,
        limit: $('#footer').offset().top 
    });
});

以下是插件及其来源的链接：

https://github.com/bigspotteddog/ScrollToFixed

Answer 2

为什么不消除所有的JavaScript并使用CSS来完成：

.sidebar-left {
    position: fixed;
    bottom: 20px; /* height of your footer */
}

Answer 3

我认为达到此目的的最简单方法是使用position: sticky;而不是position: fixed;并赋予此部分的父级position: relative;，以将粘性容器保持在父容器边界之内。 / p>

如何使#footer上的固定浮动元素停止？

3 个答案: