Okay, been trying to find an answer and testing this out for a couple hours now to no avail. I couldn't find the proper answer on here or through my own trial and error so forgive me if this is a duplicate. Here's what I need help with: I'm trying to change the nav text color when I'm scrolled to another part in the page. So, if I'm scrolled over the #firstpane id/div the 'about' text in my navbar will be black. When the #secondpane id/div is scrolled over the navbar text 'skills' will be black. When scrolled over the #thirdpane id/div the text 'contact' in my navbar will turn black. That sort of thing is what I'm trying to accomplish here.
Does anybody know how to approach this using pure css or javascript, no jQuery? I have an idea of how to do it in jQuery, just can't use it in this instance, so please no guidance suggesting jQuery.
Thanks.
body {
background-image: url("images/someTree.jpg");
background-size: cover;
font-family: 'Roboto', sans-serif;
margin: 0;
}
header {
width: 100%;
height: 85px;
position: fixed;
overflow: hidden;
top: 0;
left: 0;
z-index: 1000;
background-color: #96C339;
}
header h1#logo {
display: inline-block;
float: left;
font-family: "Monsterrat", sans-serif;
font-size: 40px;
color: #FFF;
font-weight: 400;
margin-left: 35px;
}
header nav {
display: inline-block;
float: right;
}
header nav a {
line-height: 100px;
margin-left: 20px;
margin-right: 20px;
color: #FFF;
font-weight: 700;
font-size: 20px;
text-decoration: none;
}
header nav a:hover {
color: #111;
}
@media all and (max-width: 600px) {
header h1#logo {
font-size: 30px;
display: block;
float: none;
margin: 0 auto;
height: 100px;
line-height: 55px;
text-align: center;
}
header nav {
display: block;
float: none;
height: 50px;
text-align: center;
margin: 0 auto;
margin-top: -65px;
}
header nav a {
font-size: 15px;
line-height: 50px;
margin: 0 5px;
}
}
#firstpane {
background-color: #FFF;
margin-left: 0;
height: 100vh;
margin: auto;
opacity: 0.8;
}
#secondpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
#thirdpane {
background-color: #FFF;
height: 100vh;
margin: auto;
margin-top: 6%;
opacity: 0.8;
}
::selection {
background: #000;
/* WebKit/Blink Browsers */
}
::-moz-selection {
background: #000;
/* Gecko Browsers */
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1">
<title>Portfolio Stuff</title>
<link rel="stylesheet" type="text/css" href="portfolio.css">
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>
<body>
<div id="container">
<header>
<h1 id="logo">Some Name</h1>
<nav>
<a href="#firstpane" class="firstpanenav">About</a>
<a href="#secondpane" class="secondpanenav">Skills</a>
<a href="#thirdpane" class="thirdpanenav">Contact</a>
</nav>
</header>
<!-- /header -->
<div id="firstpane"></div>
<div id="secondpane"></div>
<div id="thirdpane"></div>
<!-- end of container -->
</div>
<script type="text/javascript" src="portfolio.js"></script>
</body>
</html>You could try using JavaScript. In order to do so simply use window.onscroll (to fire a function every time you scroll). Within that function you would have to check wheter a specific part of your markup falls behind your header. If so, you just add a class to your nav. On the other hand, if your desired element is back on it's initial place (or at least not behind your header anymore) you can simply remove that class from your nav.
Your code could look like this. Of course you would need to extend this to also handle your 1st and 3rd nav/div. But at least I guess this should help you on your way achieving what you want.
// Get the necessary elements first
var skills = document.getElementsByClassName('secondpanenav')[0];
var second = document.getElementById('secondpane');
// Trigger event every time you scroll
window.onscroll = function() {
// Get boundries of your div (top, bottom, left, right)
var position = second.getBoundingClientRect();
// Check your divs position and add/remove your desired class
if (position.top < 85) {
skills.classList.add('redColor');
} else {
skills.classList.remove('redColor');
}
}