我有一个要求，元素需要粘在底部（位置：绝对）与 DOM 的一部分（位置：相对）
当 elementA 和 elementB 不在视图中时，UseCase“页脚”粘在底部（位置：绝对）。当 elementA 不在视图中时，“footer”相对位置，elementB 在视图中。当 elementA、elementB 都在视图中时，“页脚”的相对位置。
试过航点，偏移量。当滚动时 elementB 进入视图时，页脚会抖动闪烁。我认为观察者 api 在这里没有帮助。
很难准确知道您在使用 Observer API 时遇到了什么问题，但是如果 position: sticky 对您来说不够灵活，那么
IntersectionObserver你提到页脚所以也许你想要
position: fixedposition: absoluteconst b = document.getElementById("b");
const sticky = document.getElementById("sticky");
const observer = new IntersectionObserver(([entry]) => {
if (entry?.isIntersecting) {
// b is fully visible
sticky.style.position = "relative";
sticky.style.bottom = "";
}
else {
sticky.style.position = "fixed";
sticky.style.bottom = 0;
}
}, { threshold: 1.0 });
observer.observe(b);body {
margin: 0;
}
.content {
height: 100px;
line-height: 100px;
border: 1px solid black;
}
#a {
height: 50px;
background: red;
}
#b {
height: 50px;
width: 200px;
background: green;
}
#sticky {
left: 200px;
width: 200px;
position: relative;
}
#sticky div {
position: absolute;
top: -50px;
height: 50px;
width: 100%;
background: orange;
}<html>
<body>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div id="a">This is A</div>
<div class="content">content</div>
<div id="b">This is B</div>
<div id="sticky">
<div>Sticky footer</div>
</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
<div class="content">content</div>
</body>
</html>