gpt4 book ai didi

html - 粘性元素的伪类

转载 作者:行者123 更新时间:2023-11-28 15:14:35 27 4
gpt4 key购买 nike

假设我有一个带有 position: sticky 的元素。根据规范,它是 position: relativeposition: fixed 的组合。那么,我怎么知道元素是否已经固定(“粘贴”)?也许有什么伪类什么的?

最佳答案

您可以使用粘性元素的 getBoundingClientRect().top 属性。假设您在可滚动包装器 div(id“wrapper”)中有一个粘性 div(id“sticky”):

CSS:

#wrapper {
overflow: auto;
}
#sticky {
position: sticky;
}

JS :

var stickyDiv = document.getElementById('sticky');
var stickyValue = 0; // will stick on the top of the div
stickyDiv.style.top = stickyValue + 'px';

document.getElementById('wrapper').addEventListener('scroll', function () {
var distance = stickyDiv.getBoundingClientRect().top;
if (distance <= (stickyValue + 1)) {
console.log('sticked');
}
else {
console.log('not sticked');
}
});

https://jsfiddle.net/9u4q8grq/2/

当然,如果您想将此应用到整个文档,您可以将事件监听器目标更改为“window”。正如@UncaughtTypeError 所说,请注意这是一项实验性功能,IE 不支持(但 Edge 可以)。

关于html - 粘性元素的伪类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47549911/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com