Sticky header with Javascript - issues with resize

Question

I’m trying to make a sticky header. I add a padding-top value to body equal to header height to prevent jumping (because of going from position relative to fixed). But since the header height changes after breakpoint 992 because of hamburger icon, I need to update this padding value accordingly. But I couldn’t manage to do it. Not sure where and how I should add resize event listener. Please note that fixed header height is different as well, but it shouldn’t effect this body padding-top value. This is my code so far: https://codepen.io/penplaycode/pen/YzEWJGB

To understand the issue, in the codepen example, first check the desktop view, scroll down a little, you will notice the header becomes fixed to top after scrolling 100px, no jumps, everything works fine. But if you resize the window until you see the hamburger icon, and then scroll 100px to enable fixed header, you will see a slight jump on the content. Because header height is calculated according to desktop view hence the body padding value that is being added is this value, but I need it to recalculate the header height after resize and apply this new value to body as padding top.

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

You can use this code for simple sticky headers.
This code is very easy to understand.

 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>