scrolldownにクラスを追加し、クラスが

Question

私はクラス.navbgは、JavaScriptの機能addnavbgを経て追加されたクラス.socialtransを置き換えるクラス.socialtrans2を持ち、そしてクラス.navbgが削除されたときにそれらの変更を元に戻すためにしようとしていますが追加されたときに、クラスを置き換えるが、私方法を知らない。

document.getElementById("nav01").innerHTML = 
 
     "<ul id='menu'>" + 
 
     "<li><a class='regular' href='index.html'>Beatstore</a></li>" + 
 
     "<li><a class='regular' href='drums.html'>Drumkits</a></li>" + 
 
     "<li><a class='regular' href='mixing.html'>Mixing</a></li>" + 
 
     "<li><a class='regular' href='tutorials.html'>Tutorials</a></li>" + 
 
     "<li><a class='regular' href='about.html'>About</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>

Answer 1

私はあなたのCSSを変更することをお勧めしたいです。見た目以外の理由でソーシャルトランスを必要としないと仮定します。

//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はそこにありますが、2番目のことが起こります。

<!--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>

Answer 2

あなたはCurtainrisingの答えははるかにエレガントである>

function addnavbg() { 
    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) { 
     var menu = document.getElementById('menu'); 
     menu.className = 'navbg'; 
     var spans = menu.getElementsByTagName('span'); 
     for (var i = 0; i < spans.length; i++) { 
      if (spans[i].className == 'socialtrans') { 
       spans[i].className = 'socialtrans2'; 
      } 
     } 
    } 
    else { 
     var menu = document.getElementById('menu'); 
     menu.className = ''; 
     var spans = menu.getElementsByTagName('span'); 
     for (var i = 0; i < spans.length; i++) { 
      if (spans[i].className == 'socialtrans2') { 
       spans[i].className = 'socialtrans'; 
      } 
     } 
    } 
} 

各<スパンの 'socialtrans2' と 'socialtrans' を交換する必要があります。

Answer 3

これはあなたの探しているものですか？これはjQueryで簡単に実現できます

var navbg = $('.navbg'); 
var menu = $('.menu'); 
var s = $('.socialtrans'); 
var s2 = $('.socialtrans2'); 

if(menu.hasClass(navbg)){ 
    menu.removeClass(s); 
    menu.addClass(s2); 
}else{ 
    menu.removeClass(s2); 
    menu.addClass(s); 
}