I don't have much experience with HTML and CSS. I have a website with PagePiling.js scrolling. I want to let the color of my logo image and nav text change when I scroll to the next section, but just the part of the logo and nav that "crossed" the next section needs to change (I'm sorry, my English is not that good. Don't know how to explain this). That means that when the logo and nav text reach the grey section, they have to become a different color like red or something. Look at this code I found on CodePen, the part of the text which is still scrolled in the grey section is black, the part which is in the blue section is white. I've hosted my site at http://informatica.thebrandcode.nl/.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>InGadget | Dé site voor al uw gadget nieuws!</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
<script src="js/jquery-3.1.1.min.js"></script>
<script src="js/jquery.pagepiling.js"></script>
<script>
$(document).ready(function() {
$('#pagepiling').pagepiling();
});
</script>
</head>
<body>
<div class="navbar">
<a id="logo" href="index.html"></a>
<div class="nav">
<a href="index.html">Home</a>
<a href="#">Nieuws</a>
<a href="#">Forum</a>
<a href="#">Things I ❤</a>
<a href="#">Contact</a>
</div>
</div>
<div id="pagepiling">
<div class="section" id="header">
<div class="header-content-container">
<div class="header-content">
<h1>Oculus Rift<br>
Next-generation Virtual Reality.</h1>
</div>
</div>
</div>
<div class="section" id="section1">
Placheholder
</div>
<div class="section" id="section2">
Placheholder
</div>
<div class="section" id="section3">
Placheholder
</div>
</div>
</body>
</html>
CSS:
/* BASICS */
@font-face {
font-family: Neusa-SemiBold;
src: url(fonts/neusa/Neusa-SemiBold.otf);
}
@font-face {
font-family: Neusa-ExtraBold;
src: url(fonts/neusa/Neusa-ExtraBold.otf);
}
html, body {
overflow:hidden;
margin: 0;
padding: 0;
/*Avoid flicker on slides transitions for mobile phones #336 */
-webkit-tap-highlight-color: rgba(0,0,0,0);
}
/* PAGEPILING */
.pp-section {
height:100%;
position:absolute;
width:100%;
}
.pp-easing {
-webkit-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition: all 1000ms cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
-webkit-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-moz-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
-o-transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
transition-timing-function: cubic-bezier(0.550, 0.085, 0.000, 0.990);
/* custom */
}
.pp-section.pp-table{
display: table;
}
.pp-tableCell {
display: table-cell;
vertical-align: middle;
width: 100%;
height: 100%;
}
.pp-tooltip {
position: absolute;
top: -2px;
color: #fff;
font-size: 14px;
font-family: arial, helvetica, sans-serif;
white-space: nowrap;
max-width: 220px;
}
.pp-tooltip.right {
right: 20px;
}
.pp-tooltip.left {
left: 20px;
}
.pp-scrollable{
overflow-y: scroll;
height: 100%;
}
/* NAVBAR */
.navbar {
width: 80%;
margin: auto;
left: 0;
right: 0;
height: 150px;
position: fixed;
z-index: 999;
}
#logo {
width: 275px;
height: 150px;
background: transparent url(images/logo2.png) no-repeat;
background-size: contain;
float: left;
}
.nav {
float: right;
right: 0px;
}
.nav a {
line-height: 75px;
padding-left: 20px;
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 20px;
text-decoration: none;
color: #000000;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.nav a:hover {
text-decoration: underline;
}
/* SECTIONS */
#header {
background-color: #ffffff;
}
.header-content-container {
position: absolute;
bottom: 20px;
width: 100%;
}
.header-content {
width: 80%;
margin: auto;
}
.header-content h1 {
font-family: 'Neusa-ExtraBold', sans-serif;
text-transform: uppercase;
font-size: 72px;
color: #000000;
text-align: right;
}
#section1 {
background-color: #f2f2f2;
}
#section2 {
background-color: #ffffff;
}
#section3 {
background-color: #f2f2f2;
}
You forgot the javascript part that does all the magic..
As shown in your example from CodePen: