javascript - 粘性标题下的内容在滚动时跳转
问题描述
我添加了一个添加了固定类的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;
}
我看到有人问过类似的问题,但我无法添加任何内容来修复下面跳转的内容。
解决方案
需要更多上下文,但从它的声音来看,当您添加固定位置时,您会将公告从页面的上下文中取出,因此它不再占用空间 - 它本质上是浮动在其他内容之上。这将意味着内容将移至顶部。
删除位置:固定后,您将其添加回页面,使其占据高度,将内容向下推。
为了解决这个问题,我总是将公告固定为位置,并在父元素上添加一些与公告相同高度的 padding-top。或者你可以使用position:sticky;
推荐阅读
- java - 如何使用 Bouncy Castle 从 CSR 创建 X509 以使用公钥验证签名
- applescript - 无法使用 Apple 脚本打开要写入的文本文件
- regex - 从文件名中删除字符串未按预期工作
- c# - 可以将 ReadAllText 与 listBox.SelectedItem 一起使用吗?
- mysql - 在 MySQL 中对两个表中的数据进行分组
- python - 如何解决搜索字符串功能的问题?
- python - 为什么将数据框传递给 list.extend() 会导致仅列名存储在列表中?
- javascript - KeystoneJS 中是否有任何功能可以仅加载一个类别的相关项目?
- angular - 如何从 Angular 中的表情符号中删除边界。用 ngx-emoji 试过了
- reactjs - 使用 React Redux 但按条件存储数据的最佳方式是什么?