Question

我有一个粘性侧面板，其中包含几个手风琴元素，打开时会导致面板内容溢出屏幕底部。

当发生这种情况时，我想“解开”面板，允许它与页面的其余部分滚动（不是使用单独的滚动条），直到它到达其内容的底部，在哪一点我希望它坚持下去。当导致溢出的手风琴关闭，使内容再次适合屏幕时，我希望面板再次弹回到顶部。

我知道我需要依靠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());
        }
    }
}

在垂直溢出时用页面滚动的粘边栏

1 个答案: