javascript - 向下滚动添加类，添加类时替换类

当通过JavaScript函数.socialtrans2添加类.socialtrans时，我试图用类.navbg替换类addnavbg，并在删除类.navbg时还原这些更改，但我不知道怎么样。

    document.getElementById("nav01").innerHTML =
      "<ul id='menu'>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='regular' href='Placeholder1.html'>Placeholder1</a></li>" +
      "<li><a class='social' href='instagram.html'><span class='socialtrans'></span><img src='graphics/Instagram_App_Large_May2016_200.png' alt='instagram'></a></li>" +
      "<li><a class='social' href='youtube.html'><span class='socialtrans'></span><img src='graphics/YouTube-logo-full_color.png' alt='youtube'></a></li>" +
      "<li><a class='social' href='soundloud.html'><span class='socialtrans'></span><img src='graphics/soundcloud-icon.png' alt='soundcloud'></a></li>"
    "</ul>";

    function setActive() {
      aObj = document.getElementById('nav01').getElementsByTagName('a');
      for (i = 0; i < aObj.length; i++) {
        if (document.location.href.indexOf(aObj[i].href) >= 0) {
          aObj[i].className = 'active';
        }
      }
    }

    window.onload = setActive;

    window.onscroll = function() {
      addnavbg()
    };

    function addnavbg() {
      if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
        document.getElementById('menu').className = 'navbg';
      } else {
        document.getElementById('menu').className = '';
      }
    }

/* navigation */

ul#menu {
  list-style-type: none;
  margin: 0 auto;
  padding: 0;
  overflow: hidden;
  position: fixed;
  top: 0;
  width: 100%;
  height: auto;
  text-align: center;
  font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
  transition: background-color 0.2s linear;
}
.navbg {
  background-color: #424242;
}
ul#menu li {
  display: inline;
}
ul#menu li a {
  background-color: transparent;
  font-weight: bold;
  text-decoration: none;
  color: #000000;
  display: inline-block;
  padding: 10px 16px;
  transition: color 0.2s;
}
ul#menu li a:hover {
  background-color: transparent;
  font-weight: bold;
  color: #FF0000;
}
ul#menu a.regular:link {
  padding-top: 15px;
}
ul#menu li a.active {
  color: #ff0000;
}
/* social media links */

ul#menu a.social:link {
  border: 0;
  height: 30px;
  width: 30px;
  float: right;
}
ul#menu a.social.link:hover {
  display: inline-block;
}
span.socialtrans {
  position: fixed;
  width: 30px;
  height: 30px;
  float: right;
  opacity: 0;
  transition: opacity 0.2s;
}
span.socialtrans:hover {
  background-color: #ffffff;
  opacity: 0.7;
}
span.socialtrans2 {
  position: fixed;
  width: 30px;
  height: 30px;
  float: right;
  opacity: 0;
  transition: opacity 0.2s;
}
span.socialtrans2:hover {
  background-color: #424242;
  opacity: 0.7;
}

<div id="nav01"></div>

最佳答案

我建议改变你的CSS。假设除了外观外，您还不需要其他任何原因来使用socialtrans2。

//takes precedence when navbg is not set
span.socialtrans{
}
span.socialtrans:hover{
}

//takes precedence when navbg is set
.navbg span.socialtrans{
}
.navbg span.socialtrans:hover{
}

关于CSS的一个很酷的事情是，更定义的CSS“路径”优先。因此，当navbg不存在时，将发生第一个CSS。当navbg在那里时，第二个将会发生。

<!--first css in above example happens in this case-->
<ul id="menu">
  <li><a><span class="socialtrans"></span></a></li>
</ul>
<!--second css in above example happens in this case-->
<ul id="menu" class="navbg">
  <li><a><span class="socialtrans"></span></a></lis>
</ul>