sticky header 下的内容在滚动时跳转

Question

我添加了一个div，里面加了一个固定的class，滚动位置到0的时候去掉了class，但是固定的[下面的内容=28=] 跳转，我不确定如何解决。

这是我的 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)
})

CSS 为固定 div:

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

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

Answer 1

需要更多上下文，但从它的声音来看，当您添加位置固定时，您将公告从页面的上下文中删除，因此它不再占用 space - 它是基本上漂浮在其他内容之上。这意味着内容将移至顶部。

删除 position:fixed 后，您会将其重新添加到页面中，使其占据高度，将内容向下推。

为了解决这个问题，我总是将公告固定在固定位置，并在父元素上添加一些与公告高度相同的 padding-top。或者你可以使用 position:sticky;

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

sticky header 下的内容在滚动时跳转

Content under sticky header jumps on scroll

javascript

sticky

page-jump