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

Question

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

这是我试图让它工作的页面示例: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
            });
            }

            });

            });

理想的结果是侧边栏元素在滚动期间保持在 View 中并且不允许触及页脚。这在 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
            });
            }

            });
    });