How can I fix the issue with my second header not appearing during slide-in of the main header?

I have a test html file with 2 headers. The first header is supposed to slide-out out of the page when I scroll past a certain amount of pixels and it does, but at that same time the second header is supposed to appear under the main header and slide at the same time as the main header. The second one is supposed to stop at the old place of my main header. But unfortunately is doesn't even appear. Nor does my js file make it slide.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

window.addEventListener("DOMContentLoaded", function() {
var mainHeader = document.getElementById("myHeader");
// Add the scroll event listener
window.addEventListener("scroll", function() {
var oldHeader = document.getElementById('myHeader');
var newHeader = document.getElementById('newHeader');
if (window.pageYOffset > 0) {
oldHeader.style.borderBottom = "1px solid lightgrey"; 
} else {
oldHeader.style.borderBottom = "none";
}
if (window.pageYOffset >= 100) {
oldHeader.style.transform = "translateY(-100%)";
newHeader.style.transform = "translateY(0%)";
} else {
oldHeader.style.transform = "translateY(0%)";
newHeader.style.transform = "translateY(-100%)";
}
});
var navItems = document.querySelectorAll(".nav-item");
navItems.forEach(function(navItem, index) {
var submenu = navItem.querySelector(".submenu");
var submenuItems = submenu ? submenu.querySelectorAll("a") : [];
var link = navItem.querySelector("a");
if (
link &&
index !== 2 &&
submenuItems.length === 0
) {
link.addEventListener("click", function(e) {
e.stopPropagation();
window.location.href = link.getAttribute("href");
});
}
navItem.addEventListener("click", function(e) {
var isActive = submenu && submenu.classList.contains("active");
closeAllSubmenus();
if (!isActive && index !== 2) {
submenu && submenu.classList.add("active");
}
e.stopPropagation();
});
navItem.addEventListener("mouseover", function() {
navItems.forEach(function(item) {
if (item !== navItem) {
item.querySelector("a").classList.add("hovered");
}
});
});
navItem.addEventListener("mouseout", function() {
navItems.forEach(function(item) {
if (item !== navItem) {
item.querySelector("a").classList.remove("hovered");
}
});
});
submenuItems.forEach(function(item) {
item.addEventListener("mouseover", function() {
submenuItems.forEach(function(submenuItem) {
if (submenuItem !== item) {
submenuItem.classList.add("hovered");
}
});
});
item.addEventListener("mouseout", function() {
submenuItems.forEach(function(submenuItem) {
if (submenuItem !== item) {
submenuItem.classList.remove("hovered");
}
});
});
});
});
function closeAllSubmenus() {
var submenus = document.querySelectorAll(".submenu");
submenus.forEach(function(submenu) {
submenu.classList.remove("active");
});
}
});

<!-- language: lang-css -->

* {
box-sizing: border-box;
}
.sticky {
position: fixed;
top: 0;
z-index: 100;
}
#headerContainer {
position: sticky;
top: 0;
z-index: 100;
}
#myHeader,
#newHeader {
position: sticky;
top: 0;
transition: transform 0.3s ease-in-out;
}
#headerPlaceholder {
height: 73px; /* This should be the same height as your header */
visibility: hidden; /* This ensures the div is invisible when not in use */
}
#myHeader.scrolled {
border-bottom: solid 1px lightgrey;
}
#myHeader {
position: fixed;
top: 0px;
left: 0;
display: flex;
justify-content: space-between;
align-items: center;
height: 73px;
padding: 0 20px;
border-bottom: solid 1px transparent;
width: 100%;
box-sizing: border-box;
z-index: 100;
transition: transform 0.3s ease-in-out, border-color 0.3s;
}
#myHeader.slide-out {
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;
border-color: transparent;
}
#newHeader {
position: fixed;
top: 73px;
left: 0;
display: none;
justify-content: space-between;
align-items: center;
height: 73px;
padding: 0 20px;
border-bottom: solid 1px transparent;
width: 100%;
box-sizing: border-box;
z-index: 99;
opacity: 0;
transition: top 0.3s ease-in-out, opacity 0.3s, border-color 0.3s;
transform: translateY(-100%);
}
#newHeader.slide-in {
top: 0;
opacity: 1;
border-color: lightgrey;
}
.visible {
display: block;
}
.hidden {
display: none;
}
.main {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1300px; /* adjust as needed */
width: 100%;
}
@keyframes slideIn {
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0);
}
}
.border-bottom {
border-bottom: 1px solid grey;
}
.logo {
font-family: 'Open Sans', sans-serif;
user-select: none;
}
nav {
display: flex;
}
.nav-item {
position: relative;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-right: 10px;
display: inline-block;
padding: 0 28px;
cursor: pointer;
}
.nav-item a {
color: black;
text-decoration: none;
}
.submenu {
display: none;
position: absolute;
top: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
background-color: black;
padding: 10px;
border-radius: 24px;
white-space: nowrap;
}
.submenu.active {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: max-content;
}
.submenu a {
display: block;
padding: 5px 10px;
color: white;
font-weight: normal;
transition: color 0.1s;
}
.submenu a:hover {
font-weight: bold;
}
.button {
display: flex;
justify-content: space-between;
width: calc(36px * 3 + 18px * 2);
}
.btn {
width: 36px;
height: 36px;
background-color: green;
margin-right: 10px;
}
.icon {
width: 24px;
height: 24px;
background-color: white;
}

<!-- language: lang-html -->

    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&family=Poppins&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<div id="headerContainer">
<header id="myHeader">
<div class="main">
<div class="content">
<div class="logo">
<h2>Amin</h2>
</div>
<nav>
<div class="nav-item"> About <div class="submenu">
<a href="#">Culture</a>
<a href="#">Community</a>
<a href="#">Milestones</a>
</div>
</div>
<div class="nav-item"> Story <div class="submenu">
<a href="#">Archives</a>
<a href="#">History</a>
</div>
</div>
<div class="nav-item">
<a href="#">News</a>
</div>
<div class="nav-item"> Tech & Service <div class="submenu">
<a href="#">Tech</a>
<a href="#">Service</a>
</div>
</div>
<div class="nav-item"> Responsibility <div class="submenu">
<a href="#">Promise</a>
<a href="#">ESG</a>
<a href="#">Social Impact</a>
<a href="#">Digital rights</a>
<a href="#">AI Ethics</a>
</div>
</div>
</nav>
<div class="buttons">
<button class="btn">
<div class="icon"></div>
</button>
<button class="btn">
<div class="icon"></div>
</button>
<button class="btn">
<div class="icon"></div>
</button>
<!-- Repeat above line for other buttons -->
</div>
</div>
</div>
</header>
<header id="newHeader">
<div class="main">
<div class="content">
<div class="logo"> <h2>Amin's Workspace</h2> </div>
</div>
</div>
</header>
</div>
<h1 style="margin-top: 3000px">test</h1>

<!-- end snippet -->

There were multiple issues why it didn't work. For example the new header was hidden with display: none and not being shown. It's not possible to animate an element that isn't being rendered.

I suggest you use classes to add and remove styles. This will keep your JS simple and give all the styling controls to CSS, which is better in doing that stuff.

In any case, if you run into this kind of issue again, the best course of action is to remove the styles and re-add them one by one to see what effect they're having. This will help you find any contradicting styles declarations.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

window.addEventListener("DOMContentLoaded", function() {
const headerContainer = document.getElementById("headerContainer");
var oldHeader = document.getElementById('myHeader');
var newHeader = document.getElementById('newHeader');
// Add the scroll event listener
window.addEventListener("scroll", function() {
headerContainer.classList.toggle('scrolled', window.pageYOffset > 0);
if (window.pageYOffset >= 100) {
oldHeader.classList.remove('active');
newHeader.classList.add('active');
} else {
oldHeader.classList.add('active');
newHeader.classList.remove('active');
}
});
var navItems = document.querySelectorAll(".nav-item");
navItems.forEach(function(navItem, index) {
var submenu = navItem.querySelector(".submenu");
var submenuItems = submenu ? submenu.querySelectorAll("a") : [];
var link = navItem.querySelector("a");
if (
link &&
index !== 2 &&
submenuItems.length === 0
) {
link.addEventListener("click", function(e) {
e.stopPropagation();
window.location.href = link.getAttribute("href");
});
}
navItem.addEventListener("click", function(e) {
var isActive = submenu && submenu.classList.contains("active");
closeAllSubmenus();
if (!isActive && index !== 2) {
submenu && submenu.classList.add("active");
}
e.stopPropagation();
});
navItem.addEventListener("mouseover", function() {
navItems.forEach(function(item) {
if (item !== navItem) {
item.querySelector("a").classList.add("hovered");
}
});
});
navItem.addEventListener("mouseout", function() {
navItems.forEach(function(item) {
if (item !== navItem) {
item.querySelector("a").classList.remove("hovered");
}
});
});
submenuItems.forEach(function(item) {
item.addEventListener("mouseover", function() {
submenuItems.forEach(function(submenuItem) {
if (submenuItem !== item) {
submenuItem.classList.add("hovered");
}
});
});
item.addEventListener("mouseout", function() {
submenuItems.forEach(function(submenuItem) {
if (submenuItem !== item) {
submenuItem.classList.remove("hovered");
}
});
});
});
});
function closeAllSubmenus() {
var submenus = document.querySelectorAll(".submenu");
submenus.forEach(function(submenu) {
submenu.classList.remove("active");
});
}
});

<!-- language: lang-css -->

* {
box-sizing: border-box;
}
#headerContainer {
display: grid;
position: sticky;
top: 0;
height: 73px;
width: 100%;
border-bottom: solid 1px transparent;
transition: border-color 150ms ease-in-out;
z-index: 100;
}
#headerContainer.scrolled {
border-color: lightgrey;
}
#myHeader,
#newHeader {
grid-area: 1 / 1;
opacity: 0;
height: 73px;
transform: translateY(-100%);
transition: transform 0.3s ease-in-out;;
}
#myHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
#newHeader {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
}
#myHeader.active,
#newHeader.active {
transform: translate(0%);
opacity: 1;
border-color: lightgrey;
}
.visible {
display: block;
}
.hidden {
display: none;
}
.main {
display: flex;
justify-content: center;
width: 100%;
height: 100%;
}
.content {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1300px; /* adjust as needed */
width: 100%;
}
.border-bottom {
border-bottom: 1px solid grey;
}
.logo {
font-family: 'Open Sans', sans-serif;
user-select: none;
}
nav {
display: flex;
}
.nav-item {
position: relative;
font-family: 'Open Sans', sans-serif;
font-size: 16px;
margin-right: 10px;
display: inline-block;
padding: 0 28px;
cursor: pointer;
}
.nav-item a {
color: black;
text-decoration: none;
}
.submenu {
display: none;
position: absolute;
top: calc(100% + 15px);
left: 50%;
transform: translateX(-50%);
background-color: black;
padding: 10px;
border-radius: 24px;
white-space: nowrap;
}
.submenu.active {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: max-content;
}
.submenu a {
display: block;
padding: 5px 10px;
color: white;
font-weight: normal;
transition: color 0.1s;
}
.submenu a:hover {
font-weight: bold;
}
.button {
display: flex;
justify-content: space-between;
width: calc(36px * 3 + 18px * 2);
}
.btn {
width: 36px;
height: 36px;
background-color: green;
margin-right: 10px;
}
.icon {
width: 24px;
height: 24px;
background-color: white;
}

<!-- language: lang-html -->

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@500&family=Poppins&family=Roboto:wght@300;400&display=swap" rel="stylesheet">
<div id="headerContainer">
<header id="myHeader" class="active">
<div class="main">
<div class="content">
<div class="logo">
<h2>Amin</h2>
</div>
<nav>
<div class="nav-item"> About <div class="submenu">
<a href="#">Culture</a>
<a href="#">Community</a>
<a href="#">Milestones</a>
</div>
</div>
<div class="nav-item"> Story <div class="submenu">
<a href="#">Archives</a>
<a href="#">History</a>
</div>
</div>
<div class="nav-item">
<a href="#">News</a>
</div>
<div class="nav-item"> Tech & Service <div class="submenu">
<a href="#">Tech</a>
<a href="#">Service</a>
</div>
</div>
<div class="nav-item"> Responsibility <div class="submenu">
<a href="#">Promise</a>
<a href="#">ESG</a>
<a href="#">Social Impact</a>
<a href="#">Digital rights</a>
<a href="#">AI Ethics</a>
</div>
</div>
</nav>
<div class="buttons">
<button class="btn">
<div class="icon"></div>
</button>
<button class="btn">
<div class="icon"></div>
</button>
<button class="btn">
<div class="icon"></div>
</button>
<!-- Repeat above line for other buttons -->
</div>
</div>
</div>
</header>
<header id="newHeader">
<div class="main">
<div class="content">
<div class="logo"> <h2>Amin's Workspace</h2> </div>
</div>
</div>
</header>
</div>
<h1 style="margin-top: 3000px">test</h1>

<!-- end snippet -->