jquery - 修复了 jquery UI 对话框顶部的内容

Question

我想在 UI 对话框顶部有一个固定的 div，而其余的内容应该滚动。

我已经设法修复了相对于容器的问题，但position: fixed没有指定leftnortop但我无法正确调整它的大小：它的宽度是相对于它的内容而不是它的父级。

我为此设置了一个小提琴

除了添加每次调整对话框大小时调整大小的javascript之外，有没有办法实现这一点？

标签： jquerycssjquery-ui

Answer 1

考虑一下：https ://jsfiddle.net/Twisty/hafuzbxm/5/

位置：粘性；

元素position: sticky;的定位基于用户的滚动位置。

粘性元素根据滚动位置在相对和固定之间切换。它是相对定位的，直到在视口中遇到给定的偏移位置 - 然后它“粘”在适当的位置（如位置：固定）。

查看更多：https ://www.w3schools.com/css/css_positioning.asp

CSS

#infoDialogMessage {
  position: relative;
}

#fixthis {
  background-color: #333;
  color: white;
  position: sticky;
  top: 0;
}

#scrollthis {
  overflow-y: auto;
}