0

我添加了一个添加了固定类的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;
}

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

4

1 回答 1

0

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

删除位置：固定后，您将其添加回页面，使其占据高度，将内容向下推。

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

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

于 2020-11-25T11:56:11.300 回答