SOURCE

window.addEventListener('scroll',()=>{
    var header = document.querySelector('header');
    var main = document.querySelector('main');
    var top = header.offsetTop;
    var scrolled = document.documentElement.scrollTop;
    if(scrolled>top){
        header.classList.add('fixed');
        main.style.marginTop='72px';
    }else{
        header.classList.remove('fixed');
        main.style.marginTop='0px';
    }
});

<div class="header">
this is header
</div>
<header>
    <ul>
        <li><a href="">ITEM NAV</a></li>
        <li><a href="">ITEM NAV</a></li>
        <li><a href="">ITEM NAV</a></li>
        <li><a href="">ITEM NAV</a></li>
        <li><a href="">ITEM NAV</a></li>
    </ul>
</header>
<main>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta eveniet architecto iste explicabo suscipit nesciunt animi necessitatibus. Voluptatem, impedit eligendi?</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta eveniet architecto iste explicabo suscipit nesciunt animi necessitatibus. Voluptatem, impedit eligendi?</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta eveniet architecto iste explicabo suscipit nesciunt animi necessitatibus. Voluptatem, impedit eligendi?</p>
    <h1>Lorem ipsum dolor sit amet.</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta eveniet architecto iste explicabo suscipit nesciunt animi necessitatibus. Voluptatem, impedit eligendi?</p>
</main>

body,ul,li{
    margin: 0;
    padding: 0;
    font-size: 14px;
}
div.header{
    background: #333;
    color: white;
    height: 22px;
    line-height: 22px;
}
main{
    height: 200vh;
}
header{
    width: 100%;
    height: 50px;
    line-height: 50px;
    background: white;
    /* position: sticky;
    top: 0px; */
}
ul{
    list-style: none;
}
ul li{
    display: inline-block;
}
ul li a{
    display: block;
    padding: 5px 16px;
    text-decoration: none;
}
.fixed{
    position: fixed;
    top: 0px;
    background: #333;
    /* color: white; */
}
.fixed a{
    color: white;
}