带有 Javascript 的粘性标题 - 调整大小的问题

Question

我正在尝试制作一个粘性标题。我在正文中添加了一个等于标题高度的 padding-top 值，以防止跳跃（因为从相对于固定的位置开始）。但是由于汉堡图标在断点 992 之后标题高度发生了变化，因此我需要相应地更新此填充值。但我无法做到。不确定我应该在哪里以及如何添加调整大小事件侦听器。请注意，固定的标题高度也不同，但它不应该影响这个 body padding-top 值。到目前为止，这是我的代码：https://codepen.io/penplaycode/pen/YzEWJGB

为了理解这个问题，在codepen示例中，首先检查桌面视图，向下滚动一点，你会注意到标题在滚动100px后固定在顶部，没有跳转，一切正常。但是如果你调整窗口大小直到看到汉堡图标，然后滚动 100px 以启用固定标题，你会看到内容有轻微的跳跃。因为标题高度是根据桌面视图计算的，因此正在添加的正文填充值就是这个值，但是我需要它在调整大小后重新计算标题高度并将这个新值应用到正文作为填充顶部。

var navbar = document.querySelector(".navbar");
var navbarClass = navbar.classList;
var navbarH = navbar.offsetHeight;
var scrollOffset = 500;
function setPadding(e) {
  if (e.currentTarget.pageYOffset > scrollOffset) {
    document.body.style.paddingTop = navbarH + "px";
  } else {
    document.body.style.paddingTop = "";
  }
}
window.addEventListener("scroll", (e) => {
  if (
    navbarClass.contains("transparent") &&
    navbarClass.contains("navbar-light")
  ) {
    if (e.currentTarget.pageYOffset > scrollOffset) {
      navbar.classList.add("fixed");
    } else {
      navbar.classList.remove("fixed");
    }
    if (!navbarClass.contains("position-absolute")) {
      setPadding(e);
    }
  } else {
    if (e.currentTarget.pageYOffset > scrollOffset) {
      navbar.classList.add("fixed");
    } else {
      navbar.classList.remove("fixed");
    }
    setPadding(e);
  }
});

Answer 1

您可以将此代码用于简单的粘性标题。
这段代码很容易理解。

 window.onscroll = function () { myFunction() };

var header = document.getElementById("header");

function myFunction() {
  if (window.pageYOffset >= 30) {
    header.classList.add("sticky")
  } else {
    header.classList.remove("sticky");
  }
}

*{
margin:0;
padding:0;
}
body{
height:1500px;
width:800px;
background:Black;
}
header{
    position: fixed;
    width: 100%;
    padding: 20px 100px;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: 0.75s;
}
header .logo{
    color: rgb(255, 255, 255);
    font-weight: 700;
    font-size: 2.5rem;
    text-decoration: none;
}
header .nav{
    position: relative;
    display: flex;
}
header .nav li{
    list-style: none;
    margin-left: 50px;
    height:100%;
}
header .nav li a{
    text-decoration: none;
    color: #fff;
    font-weight: 300;
    font-size: 1.5rem;
}
header.sticky{
    background: rgba(255,255,255,0.85);
    padding-top:0px;
    padding-bottom:0px;
    box-shadow: 0 5px 20px rgba(0,0,0,0,0.5);
    height:3.75rem;
}
header.sticky .logo{
    color: rgb(0, 0, 0);
}
header.sticky ul{
    height:100%;
}
header.sticky ul li{
    height:100%;
    display:flex;
    align-items: center;
}
header.sticky ul li a{
    color:rgb(204, 34, 34);
}
header.sticky .nav li:hover{
    border-bottom: 5px solid #ff0157;
}

@media only screen and (max-width:600px){
  body{
  width:600px;
  }
}

<header id="header">
  <a href="#ban" class="logo">Avenger</a>
  <ul class="nav">
    <li><a href="#ban">Home</a></li>
    <li><a href="#about">About</a></li>
    <li><a href="#menu">Menu</a></li>
    <li><a href="#expert">Expert</a></li>
    <li><a href="#contact">contact</a></li>
  </ul>
</header>