JSFiddle - React, Tailwind, and code Playground

HTML

<section id="one">
    <header class=""> <a id="trigger-overlay" class=""><span class="hamburger"></span></a>
    </header>
</section>
<section id="two"></section>

CSS

section {
    height:100vh;
}

#one{
    background-color:#0097a7;
}

#two{
    background-color:#00bcd4;
}

.hamburger, #trigger-overlay .hamburger:before, #trigger-overlay .hamburger:after {
    cursor: pointer;
    background-color:#80deea;
    width:25px;
    height:3px;
    display:block;
    border-radius:6px;
    -webkit-transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, -webkit-transform 0.3s ease;
    transition:top 0.3s 0.2s ease, bottom 0.3s 0.2s ease, background-color 0.3s ease, transform 0.3s ease;
}
#trigger-overlay {
    float: left;
    margin-left:15px;
}
.hamburger:before, .hamburger:after {
    content:"";
    position:absolute;
}
.hamburger {
    position:relative;
    top:19px;
}
.hamburger:before {
    top:-7px;
}
.hamburger:after {
    bottom:-7px;
}
/*Hamburger hover*/
 #trigger-overlay .hamburger:hover, #trigger-overlay .hamburger:hover:before, #trigger-overlay .hamburger:hover:after {
    background-color: #00838f;
}
header {
    position: relative;
    width: 100%;
    height: 60px;
    background-color:#00acc1;
}
header.clone {
    position: fixed;
    background-color: #00acc1;
    top: 0px;
    left: 0;
    right: 0;
    transform: translateY(-100%);
    transition: 0.2s transform cubic-bezier(.3, .73, .3, .74);
}
body.down header.clone {
    transform: translateY(0);
}

JavaScript

var triggerBttn = document.getElementById( 'trigger-overlay' );

var sticky = {
    sticky_after: 200,
    init: function () {
        this.header = document.getElementsByTagName("header")[0];
        this.clone = this.header.cloneNode(true);
        this.clone.classList.add("clone");
        this.header.insertBefore(this.clone, this.header.childNodes[1]);
        this.scroll();
        this.events();
        document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);
    },
    scroll: function () {
        if (window.scrollY > this.sticky_after) {
            document.body.classList.add("down");

        } else {
            document.body.classList.remove("down");
        }
    },
    events: function () {
        window.addEventListener("scroll", this.scroll.bind(this));
    }
};

function toggleOverlay() {
    alert("I want to be active in both headers ");
}


triggerBttn.addEventListener( 'click', toggleOverlay );
document.addEventListener("DOMContentLoaded", sticky.init.bind(sticky));