<header class="header">
    <h1>Logo</h1>
</header>
<main>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae, voluptas!</p>
</main>
header {
    width: 100%;
    height: 60px;
    background: #ccc;
   
    &.fixed {
        position: fixed;
        top:0;
        left: 0;
        opacity: 0;
        animation: fadeIn .15s forwards; 
    }
}

main {
    height: 1500px;
    background: #ffc;
}

@keyframes fadeIn {
    100% {opacity: 1}
}
View Compiled 
const body = document.querySelector('body');
const header = document.querySelector('.header');

/* Wenn Seite geladen und fixed nav position ist höher als 300px */
window.addEventListener('DOMContentLoaded', function () {
    const rect = header.getBoundingClientRect();
    const topDistance = Math.abs(rect.top);
    fixedHeader(topDistance);
})

window.addEventListener('scroll', function () {
    const scroll = window.scrollY;

    fixedHeader(scroll);
});

function fixedHeader(scroll) {
    if (scroll > 200) {
        header.classList.add('fixed');
    } else {
        header.classList.remove('fixed');
    }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.