javascript - 如何在 Fancybox 3.5 中使用粘性 CSS

Question

我正在使用fancybox灯箱内的引导列和行为班级分配构建一个匹配的测验。我想position: sticky;在滚动时将其中一个列固定到位。很遗憾，

 position: -webkit-sticky; /* Safari */
 position: sticky;
 top: 0;

似乎没有做这项工作。

我的浏览器的开发人员工具表明这些属性没有被覆盖，即使列 div 的顶部超出了窗口的顶部。我试过固定柱子的高度，但这似乎不起作用。

对于它的价值，我已经position: sticky;在其他引导列上使用过，没有问题。

这是一个代码笔，它捕获了我正在尝试做的基础知识。我试图粘贴的 div 称为#namesBox。当用户向下滚动花式框的其余部分时，我希望它保持原位。

https://codepen.io/abrezey/pen/pBaYwo

是否有我需要添加的特定 css 属性或者我需要在 fancybox 默认设置中更改某些内容以允许这样做？

先感谢您！

标签： javascriptjqueryfancybox-3

Answer 1

我敢肯定你已经从这个开始了，但是任何偶然发现这个的人，position: sticky都不会像预期的那样与具有任何overflow其他值的祖先一起工作visible。由于 fancybox（和大多数灯箱解决方案）添加overflow: hidden到 body 元素，sticky 将不起作用。

据我所知，除了删除overflow: hiddenbody 元素和所有其他祖先的规则之外，没有办法解决这个问题。这在实践中不起作用，因为 fancybox 依赖于几个嵌套的溢出规则来提供其模态中的滚动。

来源：https ://uxdesign.cc/position-stuck-96c9f55d9526