Question

我正在创建一个包含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元素改变了类。

也许有更聪明的解决方案也有更好的性能？

这是我的第一个问题，请轻松告诉我：）

€dit：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>

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

Answer 1

滚动时，Scroll事件将被调用数百次。所以你需要在条件匹配时只执行一次动作。

以下内容将减少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
        }
    }
}

更新：working fiddle

Answer 2

我真的不知道为什么它不起作用，但我知道它现在有效。我开始使用jquery并使用以下代码，它可以正常工作。

$(document).scroll(function () {
    if (window.scrollY > 50) {
        $(".main-navigation").attr('class', 'main-navigation-scrolled');
    } else {
        $(".main-navigation-scrolled").attr('class', 'main-navigation');
    }
});

getElementsByClassName不会选择我的所有导航元素

2 个答案: