如何确保粘性侧边栏元素不与页脚重叠？

Question

我试图让左侧边栏中的元素在用户向下滚动页面时保持可见。

这是我试图让它工作的页面示例：https://guitar-dreams.com/guitar-lesson/triad-arpeggios-2-strings/20

起初我尝试使用 Bootstrap Affix，但它出现了故障。我在这里创建了一个问题：

Unexpected behavior of JS Affix - how to force div column to stay fixed width?

但决定放弃 Bootstrap Affix。所以我阅读了更多内容并遇到了这个解决方案：

How to make a sidebar sticky when scrolling between header and footer with jQuery (without scrolling over them)?

我使用了这种方法，并且几乎按照我的需要进行了工作。

但是当你向下滚动时，侧边栏元素可以触摸到页脚。当发生这种情况并且您开始向上滚动时，整个功能就会崩溃，侧边栏不会向上移动。

大多数解决方案似乎都使​​用一种方法，您可以添加/删除一个类来控制位置是否固定。我喜欢上面链接中的方法，它的动画方法，但不知道如何改变动画行为，以免触动页脚。

这是上面链接中用户benvc写的代码：

$(function() {

            const sidebar = $('#sidebar-container');
            const widget = $('#leftsidebar');
            const footer = $('#footer');
            const space = 1; // arbitrary value to create space between the window and widget
            const startTop = sidebar.offset().top + 1; // arbitrary start top position
            const endTop = footer.offset().top - widget.height() - space;

            widget.css('top', startTop);

            $(window).scroll(function() {

            let windowTop = $(this).scrollTop();
            let widgetTop = widget.offset().top;
            let newTop = startTop;

            if (widgetTop >= startTop && widgetTop <= endTop) {
            if (windowTop > startTop - space && windowTop < endTop - space) {
            newTop = windowTop + space;
            } else if (windowTop > endTop - space) {
            newTop = endTop;
            }
            widget.stop().animate({
            'top': newTop
            });
            }

            });

            });

理想的结果是侧边栏元素在滚动期间保持在视图中并且不允许触摸页脚。这在 chrome、safari、firefox 中应该同样适用。

如果您转到我放在最顶部的链接，该链接显示了当前（几乎）在我的网站上的工作方式，您可以看到其余代码，即 HTML 和 CSS。与原始解决方案相比，我对 CSS 和 JS 进行了一些调整（例如更改 const space 的值），也许其中一些更改正在发挥作用。在 chrome 中，似乎工作正常，但在 safari 中，似乎一旦侧边栏元素靠近页脚，整个功能就会停止，并且当滚动到顶部时，元素不会向上移动。

关于如何让它工作得更好一点的任何想法？

谢谢， 布赖恩

Answer 1

这有点难以实现，因为您的侧边栏是动态定位的。 一个快速的解决方法是在靠近页脚时隐藏侧栏。我添加了一个简单的条件来隐藏它。

$(function() {
    const sidebar = $('#sidebar-container');
            const widget = $('#leftsidebar');
            const footer = $('#footer');
            const space = 1; // arbitrary value to create space between the window and widget
            const startTop = sidebar.offset().top + 1; // arbitrary start top position
            const endTop = footer.offset().top - widget.height() - space;

            widget.css('top', startTop);

            $(window).scroll(function() {

            let windowTop = $(this).scrollTop();
            let widgetTop = widget.offset().top;
            let newTop = startTop;

    // update this condition to change hide logic
            if(windowTop >= (footer.offset().top-900)){
                widget[0].style.display = "none";
            } else {
                widget[0].style.display = "inline-block";
            }

            if (widgetTop >= startTop && widgetTop <= endTop) {
            if (windowTop > startTop - space && windowTop < endTop - space) {
            newTop = windowTop + space;
            } else if (windowTop > endTop - space) {
            newTop = endTop;
            }
            widget.stop().animate({
            'top': newTop
            });
            }

            });
    });