如何在 Fancybox 3.5 中使用粘性 CSS答案

【问题标题】：How to use sticky css in Fancybox 3.5如何在 Fancybox 3.5 中使用粘性 CSS
【发布时间】：2019-04-17 14:38:33
【问题描述】：

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

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

似乎没有完成这项工作。

我的浏览器的开发工具表明这些属性没有被覆盖，即使列 div 的顶部超出了窗口的顶部。我已尝试修复列的高度，但这似乎不起作用。

为了它的价值，我在其他引导列上使用了position: sticky;，没有问题。

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

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

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

提前谢谢你！

【问题讨论】：

您能提供一些示例/演示吗？我相信，如果你能让你的元素“粘”起来，那么它就没有理由在 fancybox 中不起作用。
嗨，@Janis。刚刚添加到 codepen 链接中。
您的代码似乎过于复杂，以至于我不确定是否要对其进行调试。

标签： javascript jquery fancybox-3

【解决方案1】：

我确信你已经从这个开始，但是任何绊倒这个的人，position: sticky 将无法像预期的那样与除visible 之外的任何值为overflow 的祖先一起工作。由于fancybox（和大多数灯箱解决方案）将overflow: hidden 添加到body 元素中，因此sticky 不起作用。

据我所知，除了删除 body 元素和所有其他祖先元素上的 overflow: hidden 规则之外，没有其他办法。这在实践中是行不通的，因为 fancybox 依赖于几个嵌套的溢出规则来提供其模态框内的滚动。

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

【讨论】：