让一个汉堡ID在两个头文件中工作(Make a hamburger ID work in two headers)

让一个汉堡ID在两个头文件中工作(Make a hamburger ID work in two headers)

我正在创建头部的克隆，当滚动达到一定高度时，将显示克隆版本。 这正如我所愿。 问题是我试图让“hamburger”动作在两个标题中都起作用。 现在它只适用于第一部分。 我也需要在第二节中使用它。 我知道我已经使用了一个ID（“触发覆盖”），它只能使用一次并且是唯一的。

这是正确的，它不工作的原因？ 你们知道解决这个问题的解决方法吗？

我需要它作为一个ID，因为另一个脚本中的代码更复杂，但是如果不能保留它，我将以另一种方式执行它。 我很感激这里的任何帮助。 看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));

I am creating a clone of the header and when the scroll reach a certain height, the clone version will display. This works, as I want. The problem is that I am trying to get the “hamburger” action to work in both headers. Now it only works in first section. I need to get it working in section two also. I know I have used an ID (“trigger-overlay”), which should only be used one time and be unique.

Is this correct and the reason why it is not working? Do you guys know a workaround to fix this problem?

I need it to be an ID because of a more complex code in another script, but if it’s not possible to keep it I will do it in another way. I appreciate any help here. 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); }

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

最满意答案

不幸的是，只是使用相同的ID不会给你相同的EventListeners。 但是，通过简单地将相同的EventListeners添加到新创建的克隆来解决问题很容易：

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

在这里查看你的小提琴的工作版本： http : //jsfiddle.net/qfbq2b0k/4/

Unfortunately just using the same ID won't give you the same EventListeners. But, it's easy to get around your problem by simply adding the same EventListeners to the newly created clone:

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

See a working version of your Fiddle here: http://jsfiddle.net/qfbq2b0k/4/