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

            });
    });

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

1 个答案: