html - 垂直溢出时随页面滚动的粘性侧边栏

Question

我有一个包含多个 Accordion 元素的粘性侧面板，打开这些元素后，面板的内容会溢出屏幕底部。

发生这种情况时，我想“松开”面板，让它与页面的其余部分一起滚动(而不是使用单独的滚动条)，直到它到达内容的底部，在我希望它停留在哪一点。当导致溢出的 Accordion 关闭时，内容再次适合屏幕，我希望面板再次回到顶部。

我知道我需要依靠 JS 解决方案来解决这个问题，鉴于我已经在布局中使用 bootstrap，我被它的 Affix 插件所吸引，但文档还有很多需要改进的地方想要的。

所以我的问题是:Affix 在这里听起来是不是合适的工具 - 如果是的话，我如何使用它来实现上述行为？

Answer 1

Demo

我用 javascript 和 jquery 做了我的回答。

您想要做的是创建一个函数来查找底部或顶部是否可见:

//Is the bottom visible?
function bottomVissible(el) {
    var rect = el[0].getBoundingClientRect();
    if (rect.bottom <= $(window).height()) {
        return true;
    }
    return false;
}

//Is the top vissible?
function topVissible(el) {
    var rect = el[0].getBoundingClientRect();
    if (rect.top >= 0) {
        return true;
    }
return false;
}

然后我们要监听事件:

$(window).on('DOMContentLoaded load resize scroll', handler);

我们必须在事件调用中添加一个被调用的函数。 (我们已经将它设置为 handler)

var handler = onVisibilityChange($('.side'));

为了将它们结合在一起，创建一个函数来调用文档中的更改，并添加适当的 css 值。我选择使用 css margin-top。

function onVisibilityChange(el) {
    return function () {
        if (bottomVissible(el)) {
            el.css('margin-top', $(window).scrollTop() - el.outerHeight() + $(window).height());
        } else if (topVissible(el)) {
            el.css('margin-top', $(window).scrollTop());
        }
    }
}