在没有JavaScript的情况下（如果可能），如何使元素相对于窗口具有粘性？

我一直喜欢

位置：sticky

。它解决了大部分（如果不是全部的话）问题，而无需借助JavaScript。但是，我撞到墙了。我需要使嵌套在两个

中的元素具有粘性。我们知道

position:sticky

是

position:relative

和

position:fixed

的混合体，因此它将锚定到它的第一个父对象

发件人：

该元件的位置根据泵的正常流量确定 文档，然后相对于其最近的滚动祖先进行偏移 和包含块（最近的块级祖先）

在本例中，我希望使标题相对于窗口而不是容器具有粘性。HTML使我很难在嵌套的

如果没有JavaScript，这是可能的吗

代码如下：

<div class="attendance">
<!-- Here's the header I want to make sticky to the window, and not to div.attendance-->
    <header class="text-center sticky">Monday 11/22/2019</header>
<!-- Header above -->
    <div class="date-config">
        <div class="form-group">
            <input type="checkbox" id="workable" /> No Work<br />
        </div>

        <div class="form-group">
            <label for="notes">Notes:</label>
            <textarea id="notes" class="form-control"></textarea>
        </div>
        <label for="markall">Mark all as>
        <select id="markall" class="form-control">
            <option></option>
            <option>Absent</option>
            <option>Present</option>
        </select>
    </div>

    <div class="student-attendance">
      Hello :)   
    </div>

</div>

2019年11月22日星期一
没有工作

笔记：
将所有标记为>
缺席的
目前
你好：）

有什么想法吗

我发现了，但是它使用JavaScript

编辑：

---

（当心！这是西班牙语的——看看日期！它们不会粘在窗户上！）

好的！首先，我想道歉，因为如果不呈现HTML，就无法回答这个问题。幸运的是，我找到了解决方案。

TL；DR在本例中，不需要，您需要JavaScript。您需要在元素中实现

translateY

转换才能实现这一点。我不知道问题是父元素有一个transform属性，它导致了这个问题，还是其他原因导致了这个问题

说明：

我目前正在使用一个名为的carouseljs库。我正在显示表单元素而不是图像（构建一个响应表；在尝试使用CSS网格时遇到问题）。到目前为止，一切顺利。当我想设置日期标题时，问题就出现了

我采用了设置

位置的现代方法：sticky

，但这不起作用。元件在某个位置会被堵塞，不会移动或粘住。我开始在网上搜索（最后问了同样的问题），还有HTML本身。我确实发现有许多父级

是由微小的滑块创建的。我的理论是，它会依附于其中一位家长

因此，我决定尝试将

position:fixed

与

scroll

事件相结合的旧策略。但是，这不起作用。回到在线和谷歌搜索，似乎有一个老错误，即每当将翻译应用于父母之一时，就会创建一个根外容器，并且

position:fixed

无法按预期工作

我有一种预感，这可能是sticky不起作用的原因之一，但据我所知，它似乎不起作用

我一直想了一会儿，并使用了

transform

CSS属性和

translateY

。我在浏览器中做了一个小实验，它成功了

因此，我最终实现了

scroll

eventListener并监听头的父位置，然后应用getBoundingClientRect（）获取偏移量。如果我把它应用到元素本身，它会给我通过CSS应用的翻译位置

我怀疑这是否会成为移动浏览器的性能瓶颈。因此，我检查了transform函数是否在

requestAnimationFrame

中调用，并且它已经在CSS样式表中应用了

将更改
属性

我在Google Chrome上运行了4倍于CPU速度的代码，结果很好。当你参考文档时，sticky的位置会粘在它的“最近的可滚动祖先”上，一般来说，它是任何带有“display:block”（默认值）和“display:flex”的祖先。您可以通过设置“显示：内容”使祖先不可滚动。（取决于布局和CSS的其他部分，这可能可用，也可能不可用。）
您是否可以发布您现有的CSS，以便我们运行代码并查看当前结果？@YongQuan:当然！这很糟糕（巨大，会破坏你的电脑），但我添加了一个JSFIDLE，里面有确切的代码。
position:sticky
在IE11中不受支持。所以要意识到这一点。理想的方法是使用
position:fixed
，并让其他元素以定义的页边距顶部流动。@dineshandiyan:Thank；）这更像是一个增强功能，所以如果它不适用于较旧的浏览器，也没关系。我想做一个更正。当我开车的时候，我意识到翻译实际上花的时间太长了。如果是60 Hz的屏幕，则每个FPS的频率为16.67毫秒。所以应该在那个时候左右。尽管如此，我最终还是应用了过渡效果，看起来不错。我还想补充一点，尽管它说caniuse的全球使用率为73.75%（根据您的需要调整），这也可以通过Web动画API实现。您是否可以添加一个片段来解释
display:contents
究竟是什么使其适合此实例？