Menu
What I am trying to do is fade the background of my menu from transparent to light grey when the user reaches the next section of the site. I've searched high and low for a script, and have tried multiple ones on here but nothing seems to work at all.
Any help would be greatly appreciated.
Thanks
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upbeat Designs | Freelance Web Design</title>
<link rel="stylesheet" href="style.css" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
</head>
<script type="text/javascript">
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
$(".header").addClass("scrolling");
} else {
$(".header").removeClass("scrolling");
}
});
</script>
<body>
<!-- header area -->
<div class="header">
<div id="logo">
<a href="#"><img src="images/logo.png" /></a>
</div>
<nav>
<input id="nav" type="checkbox" />
<label for="nav">
<strong>Menu</strong>
<b><i></i><i></i><i></i></b>
</label>
<menu>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</menu>
</nav>
</div>
<!-- end header area -->
<div id="container-1">
<!-- landing page -->
<div class="hero">
<div class="page">
<h1>I'm <span style="color:#fff;font-weight:600">Trisha</span>, a web designer & developer from Illinois.</h1>
<p>I believe every single detail matters. My goal is to perfect the web one pixel at a time, and provide solutions through thoughtful ideas that translate into designs that last.</p>
<div class="next">
<a href="#">Let's Go.</a>
</div>
</div>
</div>
<!-- end landing page -->
<!-- about page -->
<div class="about">
<div class="page">
<h1>About Me</h1>
<p>About Me Goes here.</p>
</div>
</div></div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
-webkit-font-smoothing: antialiased;
}
body {
background: url(images/home-bg.jpg) no-repeat center center fixed;
background-size:cover;
color: #fff;
font: 300 1em "Open Sans", Helvetica, Arial, sans-serif;
display: table;
margin: 0 auto;
}
/*----- NAVIGATION -----*/
#logo {
position: absolute;
top: 20px;
left: 20px;
}
.header {
display: block;
position: fixed;
right: 0;
left: 0;
margin: 0;
width: 100%;
padding: 30px;
background-color:transparent;
box-sizing: border-box;
}
.header.scrolling {
background: #ccc;
}
#logo img {
width: 75%;
}
nav input {
display: none;
}
nav label {
position: absolute;
top: 50px;
right: 10px;
top: 10px;
z-index: 999;
cursor: pointer;
}
nav label strong {
padding: 0 10px;
width: 40px;
height: 40px;
line-height: 40px!important;
font: 600 1em "Open Sans", helvetica, sans-serif;
color: #fff;
text-transform: uppercase;
position: absolute;
right: 40px;
top: 0px;
transition: color 250ms ease;
-webkit-transition: color 250ms ease;
}
nav label b {
width: 40px;
height: 40px;
display: block;
position: relative;
right: 0;
top: 0;
cursor: pointer;
transition: background 500ms ease;
-webkit-transition: background 500ms ease;
}
nav label b i {
display: block;
background: #fff;
width: 24px;
height: 4px;
position: absolute;
left: 8px;
top: 11px;
transform-origin: 20px 4px;
-webkit-transform-origin: 20px 4px;
transition: transform 500ms ease, opacity 500ms ease;
-webkit-transition: transform 500ms ease, opacity 500ms ease;
}
nav label b i:nth-child(2) {
top: 18px;
}
nav label b i:nth-child(3) {
transform-origin: 26px 4px;
-webkit-transform-origin: 26px 4px;
top: 25px;
}
nav menu {
background: none;
width: 150px;
height: 50%;
opacity: 0;
transition: opacity 500ms ease;
-webkit-transition: opacity 500ms ease;
position: absolute;
z-index: 998;
top: 0;
right: 0;
}
nav menu li {
margin: 0;
list-style: none;
width: 100%;
}
nav menu li:first-child {
margin-top: 60px;
}
nav menu li:first-child a {
border-top: rgba(255, 255, 255, 0.2) 1px solid;
}
nav menu li a {
padding: 20px;
font: 100 1em "Open Sans", helvetica, sans-serif;
text-transform: uppercase;
text-decoration: none;
text-align: right;
color: #fff;
display: block;
}
nav menu li a:hover {
background: rgba(0, 0, 0, 0.1);
}
nav #nav:checked ~ label strong {
color: rgba(255, 255, 255, 0.25);
}
nav #nav:checked ~ label b {
}
nav #nav:checked ~ label b i:nth-child(1) {
transform: rotate(45deg) translate(6px, 11px);
-webkit-transform: rotate(45deg) translate(6px, 11px);
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
}
nav #nav:checked ~ label b i:nth-child(2) {
opacity: 0;
}
nav #nav:checked ~ label b i:nth-child(3) {
transform: rotate(-45deg) translate(10px, -14px);
-webkit-transform: rotate(-45deg) translate(10px, -14px);
transition: all 500ms ease;
-webkit-transition: all 500ms ease;
}
nav #nav:checked ~ menu {
opacity: 1;
}
/*------------------------*/
#container-1 {
width: 100%;
height: 100%;
display: table-cell;
vertical-align: baseline;
}
.hero {
margin: auto;
height: 100%;
width: 65%;
padding: 20% 0 0;
}
.hero h1 {
font-size: 3em;
font-weight: 300;
text-align: center;
color: #ddd;
}
.hero p {
color: #ddd;
font-size: 1.5em;
font-weight: 300;
text-align: center;
margin-top: 20px;
padding-top: 20px;
border-top: 1px solid rgba(255,255,255,0.2);
}
.next {
margin: 80px auto;
width: 150px;
height: auto;
border: 2px solid rgba(255,255,255,0.2);
transition: background 500ms ease;
-webkit-transition: background 500ms ease;
text-align: center;
}
.next:hover {
background: rgba(255,255,255,0.5);
border: 2px solid rgba(255,255,255,0.0);
transition: background 500ms ease;
-webkit-transition: background 500ms ease;
}
.next a {
text-align: center;
line-height: 3em;
text-transform: uppercase;
letter-spacing: 0.15em;
color: #fff;
text-decoration: none;
}
.about {
background: #fff;
width: 100%;
height: 100%;
}
.about h1 {
font-size: 3em;
font-weight: 300;
text-align: left;
color: #777;
}
.about p {
color: #777;
font-size: 1.5em;
font-weight: 300;
text-align: left;
margin-top: 20px;
padding: 20px;
border-top: 1px solid rgba(255,255,255,0.2);
}
/*----- MEDIA QUERIES -----*/
@media only screen and (max-width: 480px) {
.hero {
width: 80%;
margin-top: 20%;
}
}
@media only screen and (max-width: 768px) {
.hero {
width: 80%;
}
}
586
Here is a fiddle of how to add classes to elements on certain scroll positions (a basic way). Obviously, you can adjust it from colors to opacity or anything. Please see that this requires jquery.
But, the reason you haven't been able to have this work is because of the way your CSS is set up. You have the contents inside of your header with the position fixed, instead of the .header itself being the element that should have position: fixed. The contents inside should not be fixed.
126
I think for your requirement https://github.com/Prinzhorn/skrollr is the way to go. It is a easy to implement library that relies on css transitions and does not require jquery
it does colors, paralax, animations and more.
23
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
