添加類的下滾，當類添加

我想有類.socialtrans2更換類.socialtrans當類.navbg通過JavaScript函數addnavbg增加，而當類.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>

來源

2016-07-07 Ken

我建議改變你的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>

來源

2016-07-07 21:12:58 curtainrising

如果我理解你，那麼這應該仍然有效。在我的例子中，這兩個CSS案例不會同時發生。定義越多，您擁有的id類和類型越多，優先級就越高。 – curtainrising

事情是socialtrans在社交鏈接上放置了一個白色bg（它們是圖像鏈接），它們因爲懸停而消失，而社交轉換2應該在它上面放一個灰色的標記，因爲navbg是灰色的，我不想讓小白色在我的社交鏈接上方格。 – Ken

非常感謝你的解決方案幫助我解決了這個問題。 – Ken

您將需要更換每個< SPAN>

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

Curtainrising的回答 'socialtrans' 與 'socialtrans2' 是更優雅。

來源

2016-07-07 21:40:56

這是你要找的嗎？這可以通過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); 
}

來源

2016-07-07 23:48:23

添加類的下滾，當類添加

回答

相關問題