Javascript 使一个汉堡包ID在两个标题中工作

我正在创建标题的克隆，当滚动达到一定高度时，将显示克隆版本。这是我想要的。问题是我试图让“汉堡包”动作在两个标题中都起作用。现在它只在第一部分起作用。我还需要让它在第二部分工作。我知道我使用了一个ID（“触发器覆盖”），它应该只使用一次并且是唯一的

这是否正确以及它不起作用的原因？你们知道解决这个问题的方法吗

我需要它是一个ID，因为在另一个脚本中有一个更复杂的代码，但是如果不可能保留它，我会用另一种方式来做。我很感激这里的任何帮助

HTML

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

香草JS

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);
}

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();
    },
    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));

---

不幸的是，仅仅使用相同的ID并不能提供相同的EventListeners。但是，只需将相同的EventListener添加到新创建的克隆中，就可以轻松解决问题：

   document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);

---

请在此处查看小提琴的工作版本：

不幸的是，仅使用相同的ID不会为您提供相同的EventListener。但是，只需将相同的EventListener添加到新创建的克隆中，就可以轻松解决问题：

   document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);

请在此处查看小提琴的工作版本：