粘性标题下的内容在滚动中跳转

Question

我添加了一个div，该div中添加了固定类，当滚动位置达到0时，该类将被删除，但固定div下的内容会跳转，我不知道如何修复。

这是我的HTML结构：

<div class="announcement-wrapper">
<div class="announcement header-announcement">
{{ settings.announcement_content_seksy }}
</div>
</div>

这是我的香草JS:

let scrollpos = window.scrollY
const header = document.querySelector(".announcement")
const header_height = header.offsetHeight

const add_class_on_scroll = () => header.classList.add("fixed")
const remove_class_on_scroll = () => header.classList.remove("fixed")

window.addEventListener('scroll', function() {
scrollpos = window.scrollY
if (scrollpos >= header_height) { add_class_on_scroll() }
else { remove_class_on_scroll() }
console.log(scrollpos)
})

固定div的CSS：

.fixed {
position: fixed;
top:0;
width: 100%;
z-index: 9999;
}

我看到过类似的问题，但我无法添加任何内容来修复跳到下面的内容。

Answer 1

需要更多的上下文，但从声音上看，当你添加固定位置时，你会将公告从页面的上下文中删除，这样它就不再占用空间了——它本质上是漂浮在其他内容之上的。这意味着内容将向上移动到顶部。

一旦你删除了位置：固定，你就把它添加回页面，使它占据高度，把内容往下推。

为了解决这个问题，我只需要始终将公告固定在位置，并在与公告相同高度的父元素上添加一些填充顶部。或者您可以使用position:sticky;

https://developer.mozilla.org/en-US/docs/Web/CSS/position