让汉堡包 ID 一分为二 headers
Make a hamburger ID work in two headers
我正在创建 header 的克隆,当滚动达到一定高度时,将显示克隆版本。这有效,如我所愿。问题是我试图让“汉堡包”动作在两个 header 中都起作用。现在它只适用于第一部分。我也需要让它在第二部分工作。我知道我使用了一个 ID(“trigger-overlay”),它只能使用一次并且是唯一的。
这是正确的吗?它不起作用的原因是什么?你们知道解决此问题的解决方法吗?
我需要它作为一个 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));
遗憾的是,仅使用相同的 ID 不会为您提供相同的 EventListener。但是,只需将相同的 EventListeners 添加到新创建的克隆中即可轻松解决您的问题:
document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);
在此处查看您的 Fiddle 的工作版本:http://jsfiddle.net/qfbq2b0k/4/
我正在创建 header 的克隆,当滚动达到一定高度时,将显示克隆版本。这有效,如我所愿。问题是我试图让“汉堡包”动作在两个 header 中都起作用。现在它只适用于第一部分。我也需要让它在第二部分工作。我知道我使用了一个 ID(“trigger-overlay”),它只能使用一次并且是唯一的。
这是正确的吗?它不起作用的原因是什么?你们知道解决此问题的解决方法吗?
我需要它作为一个 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));
遗憾的是,仅使用相同的 ID 不会为您提供相同的 EventListener。但是,只需将相同的 EventListeners 添加到新创建的克隆中即可轻松解决您的问题:
document.getElementsByClassName('clone')[0].addEventListener('click', toggleOverlay);
在此处查看您的 Fiddle 的工作版本:http://jsfiddle.net/qfbq2b0k/4/