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

Question

我正在使用 fancybox 灯箱内的引导列和行为类作业构建匹配测验。我想在滚动时使用 position: Sticky; 将其中一列固定到位。不幸的是，

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

似乎没有完成这项工作。

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

就其值(value)而言，我在其他引导列上使用了 position: Sticky; ，没有出现任何问题。

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

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

是否需要添加特定的 css 属性或需要在 fancybox 默认设置中更改某些内容才能允许此操作？

提前谢谢您!

Answer 1

我确信您已经从这里继续前进，但任何遇到此问题的人，position: Sticky 都不会按预期与具有任何 overflow 值的祖先一起工作> 除了可见之外。由于 fancybox(以及大多数灯箱解决方案)将 overflow:hidden 添加到 body 元素，粘性功能将不起作用。

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

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