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

Posted 2023-05-08

【中文标题】修复了 jquery UI 对话框顶部的内容

【英文标题】：Fixed content on top of jquery UI dialog

【发布时间】：2021-07-11 20:23:32

【问题描述】：

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

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

I've set up a fiddle for this

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

【参考方案1】：

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

位置：粘性；

带有position: sticky; 的元素根据用户的滚动位置进行定位。

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

【讨论】：

谢谢，尝试了sticky 属性，但没有使用top: 0。干得好