<header class="jd-sticky">
    <nav>
        <h1>Company Name</h1>
        <ul>
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </nav>
</header>
<section>
    <article>
        <h1>Lorem Ipsum</h1>
        <p><strong>Scroll down to hide the header navigation.</strong></p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec molestie aliquet tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed et enim tristique, luctus purus at, euismod mi. Nulla ut neque non purus tristique pulvinar. Vestibulum quis nunc nec leo suscipit rutrum et ac mi. In et felis nisi. Ut feugiat justo vitae elit euismod, et ultrices neque varius. Suspendisse consequat eros eu eleifend consectetur. Phasellus suscipit sit amet lectus eget varius. Nunc risus nulla, egestas et dictum venenatis, luctus vel dui. Nullam dolor nisl, lobortis non lorem in, lacinia mollis ante. Fusce vitae rutrum diam. Nam congue commodo lectus nec rutrum. In eget sollicitudin augue. Aliquam tempus, felis in pharetra porta, odio ante tincidunt mi, et fermentum dui ante at urna. Proin interdum sodales placerat.</p>
        <p>Sed at quam neque. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla facilisi. Integer sed elit metus. Quisque finibus convallis risus id facilisis. Nam dictum ac sapien eget lacinia. Proin malesuada nulla est, nec fermentum massa tincidunt ac. Integer pharetra diam non libero mattis, sit amet consectetur eros facilisis. Sed quis finibus odio, sed luctus neque. Aliquam erat volutpat. Nunc condimentum orci id ullamcorper volutpat.</p>
        <p>Curabitur consectetur aliquam purus vitae feugiat. Suspendisse in ultricies neque, a placerat lacus. Pellentesque elementum nisl ligula. Nunc feugiat lacus at interdum dignissim. Duis tellus sem, dignissim consequat nulla vitae, venenatis tincidunt libero. Nam et lorem neque. Suspendisse euismod ultricies elementum. Vivamus aliquet, est id bibendum porttitor, arcu est elementum orci, a dictum lacus purus a dolor. Sed imperdiet ipsum ac venenatis luctus. Praesent porta tellus sit amet suscipit sodales.</p>
        <p>Curabitur congue tellus ut enim auctor, vel semper lacus fringilla. Sed consectetur sed diam sit amet sagittis. Maecenas nec felis lectus. Nam id interdum eros. Nunc in libero diam. Sed pulvinar dui ut felis semper faucibus. Nunc pellentesque elementum nibh, ac malesuada augue cursus non.</p>
        <p>Duis volutpat, dolor non sollicitudin sagittis, nunc nulla facilisis velit, a vestibulum ante nulla in purus. Aenean ut aliquet diam. Pellentesque dignissim elit auctor justo pretium finibus. Ut nec velit ipsum. Nullam lobortis aliquet urna, condimentum vulputate lectus malesuada id. Pellentesque at mi sapien. In eu nisl et diam commodo molestie faucibus mollis nulla. Etiam mollis ullamcorper massa, ac pellentesque enim lacinia a. Aenean egestas enim vitae felis iaculis, nec egestas dolor congue. Etiam scelerisque imperdiet felis id efficitur. Aliquam consectetur diam ex, eu ultricies turpis mollis eu. Fusce quis viverra urna. Sed nec dolor vitae est ultricies finibus non at dolor. Etiam ipsum nulla, blandit vel sapien eget, convallis auctor ligula. Nam congue tellus et ex malesuada, et hendrerit odio pellentesque.</p>
        <p>Nunc rhoncus lobortis pretium. Fusce finibus orci justo, et egestas eros feugiat a. Fusce pellentesque, lorem a porta ullamcorper, enim est lacinia sapien, scelerisque ornare erat ante et dui. Phasellus maximus eu turpis eu facilisis. Proin eu leo mauris. Nam in libero dolor. Sed elit est, varius nec arcu eget, dictum rutrum orci. Nulla eget placerat nisl. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus id est non nibh vulputate eleifend. Cras eget pulvinar nisl. Maecenas pretium vulputate quam a semper. Aliquam a nulla a ipsum euismod hendrerit. Morbi sagittis elit nisi, quis sagittis ipsum tempus sit amet. Fusce laoreet orci rhoncus, congue metus sit amet, pretium massa.</p>
        <p><strong>Scroll up to see the header again, and scroll further down to hide it.</strong></p>
        <p>Etiam volutpat, eros quis iaculis lacinia, metus turpis fermentum turpis, vel consectetur ante metus finibus enim. Nunc nisl diam, tincidunt non facilisis nec, dignissim ut arcu. Suspendisse convallis non diam ut venenatis. Integer lobortis lacus ac mauris vehicula, quis blandit nisl molestie. Quisque rhoncus rhoncus purus, vel vestibulum urna pulvinar et. Aenean porta libero vel erat ullamcorper pretium. Suspendisse potenti. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed volutpat libero at leo pulvinar elementum venenatis sagittis elit. Praesent in elementum sem.</p>
        <p>Etiam pellentesque posuere tellus sit amet bibendum. Aenean lacinia cursus arcu eget vulputate. Proin ut consectetur est. Nunc porta, massa ac faucibus aliquet, nisl turpis luctus ipsum, ac lobortis quam elit in nunc. Nulla venenatis laoreet mauris, ut tincidunt mi. Vivamus in lobortis dolor, sed ultrices lorem. Quisque ac neque sed sapien congue vestibulum cursus a est. Sed ac hendrerit urna, et gravida ante.</p>
        <p>Nulla elementum, ex at mollis tempus, libero mauris dictum lorem, sit amet varius eros elit at neque. Vestibulum et est neque. Integer purus lacus, dignissim in nulla malesuada, accumsan sodales sem. Integer quis posuere nisi. Praesent sit amet augue suscipit, porttitor quam vel, pulvinar risus. Pellentesque vel molestie nunc, et auctor augue. Integer eget augue nec nibh congue auctor sit amet a orci. Aliquam lobortis erat vel nulla pharetra tincidunt.</p>
        <p>Nullam dignissim auctor dui, nec tristique orci finibus vitae. Suspendisse ac augue varius, viverra magna gravida, auctor dolor. Maecenas fringilla et orci ac dapibus. Vivamus malesuada et lectus eu luctus. Nam sagittis placerat orci, eget pharetra lorem. Mauris in feugiat dolor. Sed auctor tempor lorem, non sollicitudin lectus tincidunt quis. Nam ut ullamcorper erat. Praesent vehicula hendrerit neque, in finibus diam vehicula eu. Nullam vitae augue finibus, dapibus sem blandit, mollis lorem. Fusce elementum odio et sem viverra suscipit.</p>
    </article>
</section>
/**
 * Sticky CSS
 */
/* add padding-top to match height of the header */
body {
    padding-top: 70px;
}
/* on mobile the header is twice as hight, and so should the padding be */
@media (max-width: 768px) {
    body {
        padding-top: 140px;
    }
}
/* make header fixed to the top */
.jd-sticky {
    position: fixed;
    top: 0;
    /* and a smooth transition, so it won't just pop in and out the screen */
    transition: top 700ms linear;
}


/* Basic CSS for demo purposes */
@color1: #363E59;
@color2: #0ABF8C;
@color3: #F2BB13;
@color4: #F29727;
@color5: #F27244;
@menu-height: 70px;

body {
    background-color: #eeeeee;
    color: black;
    font-family: 'Open Sans', sans-serif;
}
header {
    background-color: @color1;
    width: 100%;
    & nav {
        width: 80%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        & h1 {
            color: white;
            margin: 0;
            padding: 0;
            margin-right: 2em;
            line-height: @menu-height;
        }
        & ul {
            list-style: none;
            display: flex;
            flex-direction: row;
            margin: 0;
            padding: 0;
            align-content: center;
            justify-content: space-evenly;
            align-items: center;
            & li {
                margin: 0;
                padding: 0;
                & a {
                    text-decoration: none;
                    color: @color3;
                    padding: .5em .7em;
                    margin-right: 1em;
                    line-height: calc(@menu-height - 1em);
                    vertical-align: middle;
                    display: block;
                    &:hover {
                        color: @color5;
                        background-color: #eeeeee;
                    }
                }
            }
        }
    }
}
section {
    width: 80%;
    margin: 0 auto;
    & article {
        & h1 {
            color: @color1;
        }
        & p {
            & strong {
                color: @color2;
            }
        }
    }
}

/* some mobile stuff */
@media (max-width: 768px) {
    header {
        & nav {
            width: 90%;
            flex-direction: column;
            align-content: center;
            & h1,
            & ul {
                margin: 0 auto;
                max-width: 100%;
            }
        }
    }
    section {
        width: 90%;
    }
}
View Compiled
/**
 * Sticky JS
 */
/* set the element you want to make sticky */
const headerElem = document.querySelector('.jd-sticky');
/* set the offset on which the hide effect has to wait */
const scrollOffset = 200;

/* DO NOT MODIFY BELOW */
/* get the current page position */
let prevScrollpos = window.pageYOffset;

/* monitor when the page is being scrolled */
window.addEventListener('scroll', () => {
    /* check if the scroll offset is passed */
    if (window.pageYOffset > scrollOffset) {
        /* get the new page position after scrolling */
        let currentScrollPos = window.pageYOffset;
        /* check the new page position with the old position */
        if (prevScrollpos > currentScrollPos) {
            /* if scrolling UP, show the sticky element */
            headerElem.style.top = '0';
        } else {
            /* if scrolling DOWN, hide the sticky element */
            headerElem.style.top = '-100%';
        }
        /* set the page position, so it can be checked the next time */
        prevScrollpos = currentScrollPos; 
    }
});

External CSS

  1. https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.