我正在使用 HTML、CSS 和 JavaScript(没有 jQuery)创建一个网站。
我创建了以下脚本来在我的 pageoffset 大于 50 时更改我的导航类,如果它小于 50 则将其改回:
window.onscroll = function (event) {
var nav = document.getElementsByClassName('main-navigation');
var navscr = document.getElementsByClassName('main-navigation-scrolled');
if (window.pageYOffset > 50) {
for(var i = 0; i < nav.length; i++) {
nav[i].className = 'main-navigation-scrolled';
}
}
else {
if (window.pageYOffset < 50) {
for(var i = 0; i < navscr.length; i++) {
navscr[i].className = 'main-navigation';
}
}
}
}
出于某种原因,当我的偏移量超过 50 时,当我非常缓慢地滚动或重新加载页面时,只有一半的 li 元素会更改类。
也许有更智能的解决方案也有更好的性能?
这是我的第一个问题,请放轻松:)
€编辑:HTML
<div id="nav-menu-container-fix">
<ul>
<li><a class="main-navigation" href="index.html">Home</a></li>
<li><a class="main-navigation" href="about.html">About</a></li>
<li><a class="main-navigation" href="#">Team</a></li>
<li><a class="main-navigation" href="#">24 Weeks</a></li>
<li><a class="main-navigation" href="#">Donate</a></li>
<li><a class="main-navigation" href="#">Downloads</a></li>
<li><a class="main-navigation" href="#">Forum</a></li>
</ul>
</div>
Aaaa 和 CSS
a.main-navigation {
padding:18px 15px 15px 15px;
background-color:#222222;
color:#bbbbbb;
display:inline-block;
text-decoration:none;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
a.main-navigation:hover {
padding:18px 15px 15px 15px;
background-color:#555555;
color:#ffffff;
display:inline-block;
text-decoration:none;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
a.main-navigation-scrolled {
padding:7.5px 15px 7.5px 15px;
background-color:#604D9D;
color:#eeeeee;
display:inline-block;
text-decoration:none;
-webkit-transition: all 600ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
a.main-navigation-scrolled:hover {
padding:7.5px 15px 7.5px 15px;
background-color:#402c6c;
color:#ffffff;
display:inline-block;
text-decoration:none;
-webkit-transition: all 400ms ease;
-moz-transition: all 600ms ease;
-ms-transition: all 600ms ease;
-o-transition: all 600ms ease;
transition: all 600ms ease;
}
最佳答案
滚动事件将在您滚动时被调用数百次。因此,当条件匹配时,您只需要执行一次操作。
下面会减少dom访问
var scrolled = false; // initially page is not scrolled
window.onscroll = function (event) {
if (window.pageYOffset > 50 && !scrolled) { //perform following only if it's not done already
var nav = document.querySelectorAll('main-navigation');
for (var i = 0; i < nav.length; i++) {
nav[i].className = 'main-navigation-scrolled';
scrolled = true; // applied scroll class no need to do this again
}
} else if (window.pageYOffset < 50 && scrolled) { //perform the following only it's not done already
var navscr = document.querySelectorAll('main-navigation-scrolled');
for (var i = 0; i < navscr.length; i++) {
navscr[i].className = 'main-navigation';
scrolled = false; // applied no scroll class, no need to do it again
}
}
}
关于javascript - getElementsByClassName 没有选择我所有的导航元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22479021/