javascript - 修复 div 标签在对话框弹出框内的位置

Question

我有一个对话框，点击一个按钮就会出现。在对话框中我有一个按钮和其他内容。我想让那个按钮的位置固定在对话框弹出窗口中。

$(window).bind('scroll', function() {
    if ($(window).scrollTop() > 50) {
    $('#footer_buttons').addClass('sticky');

}
else {
    $('##footer_buttons').removeClass('sticky');
}
});

<style>
  .sticky{ 
    position : fixed;
 }
</style>

我用上面的代码固定了按钮的位置，它在对话框外工作但在对话框内使用相同的代码时不起作用。我可以通过向对话框添加最小高度并使对话框内容可滚动来修复按钮。但我不想向对话框内的内容添加任何滚动条。 谁能帮我吗。提前致谢

Answer 1

来自 MDN CSS position属性:

fixed: Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it when scrolled. When printing, position it at that fixed position on every page.

所以元素在哪里并不重要。如果您应用固定位置，top、left、right、bottom值相对于屏幕的视口(viewport)(浏览器中的可见区域)。

在您的情况下，您应该使用 absolute 定位并使用四个定位属性中的两个设置位置:top、right、bottom、left。不要忘记将 position: relative or absolute 添加到模态容器。