menu background change color on scroll

Question

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 &amp; 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%;
    }
}

What have tried to code to make the fade work? And " i just don't feel like finding them." - huh? — Jay Blanchard, May 12 '14 at 16:48
@JayBlanchard I meant that I've looked at dozens of scripts trying to make this work.. and I don't feel like going back to find them. For instance, this one: http://stackoverflow.com/questions/8755887/jquery-change-background-color-user-scroll, I replace #menu with .header, and nothing happens. — Trisha, May 12 '14 at 16:51
Can you post the script that you have tried, not just links to others that haven't helped? — Reinstate Monica Cellio, May 12 '14 at 16:52
Ah, so you're looking for a script or a plugin? If so that will likely cause your question to be closed. — Jay Blanchard, May 12 '14 at 16:52
@JayBlanchard Those links are the scripts that I have tried... and yes I am looking for a script, or help with ho to do it. why would that close my question? — Trisha, May 12 '14 at 16:53
Because that is one of the trigger items for SO - "Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it. " — Jay Blanchard, May 12 '14 at 17:00
Have you considered using bootstrap's scrollspy?> http://getbootstrap.com/javascript/#scrollspy — DivineChef, May 12 '14 at 17:02
Here is a [sample](http://jsfiddle.net/4xSe4/) of how to add classes to elements on certain scroll positions. Obviously, you can adjust it from colors to opacity or anything. Also, in your code, you should have the header have the fixed position instead of the elements inside the header. — Justin, May 12 '14 at 17:03
Thanks Jay, I will remember this for next time. It was not my intentions to just ask for a script.. but to ask for help. @Justin, I have added this to my code, and it is still not working. http://upbeatdesigns.net/ud/ has the new code. — Trisha, May 12 '14 at 17:18
That't because its your CSS that's incorrect still. Check my answer. — Justin, May 12 '14 at 17:19
I did, and I changed my header position to fixed, and removed the fixed positioning on the logo and menu classes. — Trisha, May 12 '14 at 17:20

Justin · Accepted Answer · 2014-05-12T17:26:08.030

12

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.

edited May 12 '14 at 17:26

answered May 12 '14 at 17:15

Justin

4,922
2
27
69

Please check the code again, it didn't upload via ftp when I changed it the first time, but it is fixed now. – Trisha May 12 '14 at 17:23
Wow.. can't believe I didn't think about that. It's been a long day. Thanks for the help, it worked.. and I've already added other classes to the script as well so I can change more than just the `.header` class! – Trisha May 12 '14 at 17:32
thnx work for me – Hani Abu khurma Jul 19 '22 at 09:40

score 1 · Answer 2 · answered May 12 '14 at 18:08

1

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.

answered May 12 '14 at 18:08

Ben

13,297
4
47
68

score 0 · Answer 3 · answered May 12 '14 at 17:50

Binding the scroll to the window is a bad idea.

If you want to trigger a change on each section of the website have a look at jquery waypoints

http://imakewebthings.com/jquery-waypoints/

    $('.section').waypoint({handler: function() {
            $('.menu').css('background', '#ff3366');
        },
        offset: '50%'
    });

Hope this helps.

menu background change color on scroll

3 Answers3

Linked