Question

假设我有position: sticky的元素。根据规范，它是position: relative和position: fixed的组合。那么，我怎么知道，元素是否已经固定（“粘贴”）？也许有任何假类或什么？

Answer 1

您可以使用sticky元素的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/

当然，如果要将事件侦听器目标应用于整个文档，则可以将其更改为“窗口”。正如@UncaughtTypeError所说，请注意它是一个实验性功能，IE不支持（但是对Edge来说没问题。）

Pseudoclass为stickied元素

1 个答案: