GetElementByClassNam

by Michael McGettrick

HTML

<!doctype = html>
<header>
<title>Project Two Template</title>
<link href="styleSheet.css" type="text/css" rel="stylesheet">
<script src="scriptSheet.js"></script>
</header>
<body>
	<div id="pageHeader"><h1>Welcome to Michael McGettrick.com</h1></div>
	<div id="navBar">
		
		<ul id="navBarList">
			<li><a class="navBarLink" style="background-color: #000000; color: #ffffff;"href="index.html">Home</a></li>
			<li><a class="navBarLink" href="about.html">About</a></li>
			<li><a class="navBarLink" href="itprojects.html">IT Projects</a></li>
			<li><a class="navBarLink" href="languageprojects.html">Language Projects</a></li>
			<li><a class="navBarLink" href="contact.html">Contact</a></li>
			<li><a class="navBarLink" href="essays.html">Essays</a></li>
		</ul>
	</div>
	<div id="bodyDiv">
		<div id="leftColumn">
			<p id="consoleInfo"></p>
			
			<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce scelerisque erat id tellus laoreet convallis. Suspendisse ut est eu magna porta ultricies ullamcorper ut metus. Nullam fringilla dolor quis viverra efficitur. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer fermentum sed massa et euismod. Donec eget porttitor quam. Nam vulputate velit risus, eget commodo tellus efficitur ac. Phasellus sodales ornare elit, quis pellentesque eros pharetra id. Etiam cursus sapien sit amet neque tincidunt efficitur.
			</p>
			<br>
			<p>
			Sed vestibulum euismod nisl vitae pretium. Donec tincidunt condimentum nisi vitae imperdiet. Nullam convallis sit amet turpis in rhoncus. In efficitur, nisl et pellentesque luctus, magna nulla dignissim quam, a varius lacus augue et sapien. Curabitur a malesuada lectus. Phasellus a nulla ullamcorper, molestie lacus a, euismod augue. In ex mauris, pulvinar sit amet diam eget, bibendum imperdiet nisi. Nulla ut tincidunt elit. Duis commodo laoreet mauris et posuere. Proin vestibulum lorem at risus mollis, eget vulputate arcu fringilla. Fusce...

CSS

*, html {
    margin:0;
    padding:0;  
}

#navBar {
	
	width:100%;
	text-align: center;
	height: 45px;
	bottom: 0px;
	
	

}
#pageHeader {
	height: 60px;
	background-color: #ffffff;
	width:100%;
	text-align: center;
	
}
#pageHeader h1 {
	padding:5px;
	font-weight: 900;
	margin-top: 20px;
}


#bodyDiv{
	width:100%;
	border-top: 5px solid;
	border-color: #b3b3b3;
	
}

#navBarList {
	text-align: left;
	border-top: ;
	border-bottom: solid black 4px;
	padding-left: 30px;
	height:40px;
	bottom: 0px;
	
}

#navBarList li {
	display: inline-block;
	
	
	
	
}

.navBarLink {
	text-decoration: none;
	color: #000000;
	font-weight: 700; 
	display:block;
	line-height: 1.3em;
	padding: 10px;
	background: #d9d9d9;
	border-top-left-radius:1em;
	border-top-right-radius:1em;
	text-align: center;
	
	
}

#navBarList li a:hover {
	background-color:#99ccff;
}



#leftColumn {
	display: inline-block;
	width: 46%;
	float: left;
	padding: 2%;
	
}
#rightColumn{
	display: inline-block;
	width:46%;
	float:left;
	padding: 2%;
}
#singleColumn {
	padding: 5px;

}
.bubble {
	
}
.bubble a{
	text-decoration: none;
	color: #000000;
	display: block;
	border-width: 40px;
	border-color: white;
	border-style: solid;
	display: block;
	height: 200px;
	width: 200px;
	position: relative;
	text-align: center;
	border-radius: 50%;
	line-height: 200px;
	background-color:#b3ccff;
	transition: border-width 2s, height 2s, width 2s, line-height 2s, border-style 2s, border-color 2s;
}
.bubble a:hover{
	border-width: 0px;
	height: 280px;
	width: 280px;
	line-height: 280px;
}

JavaScript

window.addEventListener('scroll', function (evt) {
  var distance_from_top = document.body.scrollTop;
  if (distance_from_top <= 80) {
	document.getElementById("navBar").style.position = "static";
	document.getElementById("navBarList").style.borderBottom = "solid black 4px";
	document.getElementById("navBar").style.borderTop = "initial";
  }


	else if(distance_from_top > 80) {
	document.getElementById("navBar").style.position = "fixed";
	document.getElementById("navBar").style.top = "0px";
	document.getElementById("navBar").style.borderTop = "solid black 4px";
	document.getElementById("navBarList").style.borderBottom = "initial";
	var myCollection = document.getElementsByClassName("navBarLink");
	var collectionLength = myCollection.length;
	document.getElementById("consoleInfo").innerHTML = collectionLength;
	document.getElementById("consoleInfo").innerHTML = myCollection[0];
	for(var i = 0, i <= collectionLength, i++){
		myCollection.item(i).style.borderTopLeftRadius = "initial";
		myCollection.item(i).style.borderTopRightRadius = "initial";
		myCollection.item(i).style.borderBottomLeftRadius = "1em";
		myCollection.item(i).style.borderBottomRightRadius = "1em"; 
		}
	} 
	

  

});