Content jumps up after header transform-CodePudding

I have seen some Questions in this forum about the classic jumping header, and I've read through everything but sadly nothing could solve my problem...

The problem is, I made a header that shrinks when you start scrolling down, which works fine with the header_placeholder I've added, which keeps the distance between header and content. As soon as you scroll up again, it just snaps the content down and the header grows back to original size. I want a smooth transition, but I couldn't figure out what the problem is.

Here is a codepen for you to see what I mean: https://codepen.io/Marcii_21/pen/YzjzjGz

HTML:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WeSoDev</title>
    <link rel="stylesheet" href="index.css">
</head>
<body>
<div id="navbar">
    <nav id="nav">
      <h1 id="header">header</h1>
    </nav>
</div>
<div id="navbar_placeholder"></div>
<div id="content">
    <h1 >Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
        Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.
        At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</h1>
</div>
    <script src="index.js"></script>
</body>
</html>

CSS:

:root{
    --background-color: #001728;
    --darker-background-color: #000000;
    --accent-color: #20cc5b;
    --text-color: #FFFFFF;
    --navbar-height: 80px;
}
html{
    height: 100%;
}
body{
    height: 100%;
    background-color: var(--background-color);
}
nav{
    height: var(--navbar-height);
    background-color: red;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 4px solid var(--accent-color);
    transition-property: height;
    transition-duration: 0.5s;
}
.navbar_placeholder {
    height: var(--navbar-height);
    display: none;
    transition: height 0.5s;
}
.text1{
    padding: 30px;
  color: white;
}
.sticky {
    position: fixed;
    top: 0;
    width: 100%;
}
.disappear {
    opacity: 0%;
    transition-duration: 0.5s;

}
.shrink {
    height: 40px;
    transition-property: height;
    transition-duration: 0.5s;
}
.display {
    display: block;
    height: var(--navbar-height);
}

JS:

var content = document.getElementById("content");
var nav = document.getElementById("nav");
var placeholder = document.getElementById("navbar_placeholder");
var sticky = navbar.offsetTop;

window.onscroll = function() {myFunction()};
function myFunction() {
    if (window.pageYOffset > sticky) {
        navbar.classList.add("sticky");
        placeholder.classList.add("display");
        nav.classList.add("shrink");
        content.classList.add("content");
    } else {
        navbar.classList.remove("sticky");
        placeholder.classList.remove("display");
        nav.classList.remove("shrink");
        content.classList.remove("content");
    }
}

CodePudding user response：

so, first of all there are a few errors in your code, taking the navbar_placeholder element for example, which is an id when referenced in css it should be #navbar_placehoder instead of .navbar_placeholder you wrote, that is not used anywhere.

Second, instead of doing using all this code, you could simply use the position:sticky property on your navbar and just toggle the 'shrink' class - the 'sticky' class would be useless. On top of that for this particular scenario, since the header is at the top , you could just use position:fixed from the beginning an add a padding-top to the body equal to the navbar's initial height - 80px.

To help you in this particular problem you are facing, you should place your navbar inside the navbar placeholder, add position:relative and give a specific height to the placeholder equal to its contents (80px in this case) and then add position:absolute on the navbar.

I forked and updated the code for you: https://codepen.io/scooterlord/pen/mdjdGdm