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

Question

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

我在没有指定 left 或 top 的情况下设法用 position: fixed 修复了相对于容器的问题，但我无法正确调整它的大小：它的宽度是相对的到它的内容而不是它的父级。

I've set up a fiddle for this

除了添加每次调整对话框大小时调整大小的 javascript 之外，还有什么方法可以实现此目的吗？

Answer 1

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

position: sticky;

An element with position: sticky; is positioned based on the user's scroll position.

A sticky element toggles between relative and fixed, depending on the scroll position. It is positioned relative until a given offset position is met in the viewport - then it "sticks" in place (like position:fixed).

查看更多：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;
}

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

Fixed content on top of jquery UI dialog

css

jquery

jquery-ui