javascript - 在 .sticky-top 元素中调用时，弹出窗口会滚动并且某些内容会隐藏

Question

因此，使用 Bootstrap 4，我将导航栏设置为 .sticky-top。有一个调用弹出窗口的按钮，该按钮效果很好，直到页面滚动一点，然后弹出窗口内容的顶部被隐藏。

如果它只发生在滚动时，这还不算太糟糕。真正的问题是，如果滚动后打开弹出窗口，内容仍然是隐藏的。

这是一个显示问题的 fiddle :

https://jsfiddle.net/vfpb7r2d/16/

最相关的代码:

<div class="sticky-top bg-dark p-2">
    <div class="btn btn-primary" data-toggle="popover" title="More information..." data-content="Isn't there a way to keep the whole popover visible??? The longer the popover content becomes, the more of the content disappears with scrolling. (There does seem to be a maximum cutoff point, but I haven't tried to measure what it is.)" />Button</div>
</div>

有什么办法可以解决这个问题吗？

Answer 1

添加data-boundary="viewport"到弹出框元素。

  <div class="btn btn-primary" data-toggle="popover" data-boundary="viewport" title="More information..." data-content="Isn't there a way to keep the whole popover visible?">Button</div>

https://jsfiddle.net/vfpb7r2d/22/