javascript - 使汉堡 ID 在两个 header 中工作

Question

我正在创建标题的克隆，当滚动达到一定高度时，将显示克隆版本。这有效，如我所愿。问题是我试图让“汉堡包”操作在两个标题中都起作用。现在它只适用于第一部分。我也需要让它在第二节中工作。我知道我使用了一个 ID(“trigger-overlay”)，该 ID 只能使用一次并且是唯一的。

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

我需要它作为一个 ID，因为另一个脚本中的代码更复杂，但如果无法保留它，我会用另一种方式来做。我很感激这里的任何帮助。 See JSFiddle

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

普通 JS

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

Answer 1

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

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

在此处查看 Fiddle 的工作版本:http://jsfiddle.net/qfbq2b0k/4/