kdn309 kdn309 - 5 months ago 11
Javascript Question

Add class on scrolldown and replace class when class is added

I am trying to have the class

.socialtrans2
replace the class
.socialtrans
when the class
.navbg
is added via the JavaScript function
addnavbg
, and revert those changes when class
.navbg
is removed, but I don't know how.



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

I'd suggest changing your css. Assuming that you don't need socialtrans2 for any other reasons besides the look.

//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{
}

A cool thing about css is that a more defined a css "path" takes precedence. So when navbg is not there, the first css will happen. While navbg is there, the second will happen.

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