Menu
Hello everybody I’m new here and to the ever widening world of javascript.I’m trying to write a javascript function that changes out ,full css classes at different heights in the page (aka…the nav styles at different sections of the web page). I’m open to suggestions on how to accomplish this. I’ve tried swapping css.style sheets, changing the styles manually, I’ve been thinking about just changing the over all class.Ideally I like to just switch out style sheets at different pageHeights? If thats possible. Any and all help and instruction and suggestions is very appreciated. Here is the basic layout of my function, a css style, and html pertaining to the nav section. Please forgive me if I post this wrong I hope I get the forum code blocks right.
Here is my function:It’s in an external .js file
[code]
<script type=”text/javascript”>
var yPos;
function swapStyleSheet(sheet){
yPos = window.pageYOffset;
if(yPos > 698 && yPos < 1800){
document.getElementById(‘middle’).setAttribute(‘href’, sheet);
}else if(yPos > 1900){
document.getElementById(‘bottom’).setAttribute(‘href’, sheet);
}else{
document.getElementById(‘top’).setAttribute(‘href’, sheet);
}
}
</script>
Here is my html:
[code=html]
<!DOCTYPE html Public “-//W3C//DTD XHTML 1.0 Transitional//EN”
“http://www.w3.org//TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta name=”keywords” content=””/>
<meta name=”description” content=”parallax template”/>
<meta http-equiv=”Content-Type” content=”text/html”; charset=”utf-8″/>
<meta name=”viewport” content=”width=device-width, intial-scale=1.0″>
<link id=”bottom” rel=”stylesheet” type=”text/css” href=”css/bottom.css”/>
<link id=”top” rel=”stylesheet” type=”text/css” href=”css/top.css”/>
<link id=”middle” rel=”stylesheet” type=”text/css” href=”css/middle.css”/>
<link rel=”stylesheet” type=”text/css” href=”css/main_info.css”/>
<title>White Canvas Designs</title>
</head>
<body>
<div id=”nav” onscroll=”swapStyleSheet(‘top.css’,’middle.css’,’bottom.css’)”>
<a id=”home” href=”#”>HOME</a>
<a id=”about” href=”#”>ABOUT</a>
<a id=”portfolio” href=”#”>PORTFOLIO</a>
<a id=”contact” href=”#”>CONTACT</a>
<a id=”hosting” href=”#”>HOSTING</a>
</div>
Then I want to alter this CSS code three different ways(They also have corresponding :hover and touch classes as well)
Which is why I thought to change the css style sheets would be easiest way.
[code]
#home, #about, #portfolio, #contact, #hosting {
display:inline;
float:left;
font-family:Charlemagne Std, Helvetica, sans-serif;
font-size:23px;
margin:0;
padding: 18px 24px;
margin-right: 30px;
border-radius:3px;
text-decoration:none;
color:#000000;
text-shadow:1px 1px 3px #cc6633;
transition: background 0.5s ease-in 0s;
transition: color 0.3s ease-in 0s;
transition: background-color 0.5s ease-in 0s;
transition: opacity 0.5s ease-in 0s;
}
Please help any suggests or comments are greatly appreciated.
Humbly,
Drizzt213