jQuery help with change color and background when scrolling

[OP ACTIONpack 341]

http://adhesivesquares.com/one-page/

 

Above is the page I'm working on. I would like to know how to at a black background to the top navigation when you start scrolling down. Also the circle nav on the left. Is there a way to change the white to black or any darker color when it's in a different section tag? Can't see it when your in the lighter background. Thanks!

[Seahorsepip 488]

http://adhesivesquares.com/one-page/

Above is the page I'm working on. I would like to know how to at a black background to the top navigation when you start scrolling down. Also the circle nav on the left. Is there a way to change the white to black or any darker color when it's in a different section tag? Can't see it when your in the lighter background. Thanks!

Add the navigation inside each section instead with different css bg and or color styling, z-index should do what you want then for you.

[nelsontb 1]

You made a mess in that page javascript.

 

Separate functions from variables

 

This is dangerous as it can run before the page is fully loaded, ie still is missing <a> tags

var sections = $('a[href^="#"]');

Change it to this to avoid it

var sections;

$( document ).ready(function() {
    sections = $('a[href^="#"]');
});

To answer the original question, add this to the script and create a reference in CSS to "darker" with the color you want

$( window ).scroll(function() {
  if ($( window ).scrollTop() == 0) {
    $('.header').removeClass('darker');
  } else {
    $('.header').addClass('darker');
  }
});

Edit: accidentally a copy paste

[Seahorsepip 488]

I'll make a jsfiddle when I'm on my PC in a few hour ;)

[Seahorsepip 488]

If you want the bg color of the header to exactly change at the point where the background changes you can do this:

http://jsfiddle.net/bmGRP/6/

 

Keep in mind that css hover on any element inside these header would look bad since you hover only the top or the bottom half of each header :/

And also inputs would look like being clipped half way, this can be fixed with jquery though.

 

So if you only got a few links it's doable and maybe even looking cool but if you got a complex header with multiple types of input elements just ignore this post ^^

[OP ACTIONpack 341]

You made a mess in that page javascript.

 

Separate functions from variables

 

This is dangerous as it can run before the page is fully loaded, ie still is missing <a> tags

var sections = $('a[href^="#"]');

Change it to this to avoid it

var sections;

$( document ).ready(function() {
    sections = $('a[href^="#"]');
});

To answer the original question, add this to the script and create a reference in CSS to "darker" with the color you want

$( window ).scroll(function() {
  if ($( window ).scrollTop() == 0) {
    $('.header').removeClass('darker');
  } else {
    $('.header').addClass('darker');
  }
});

Edit: accidentally a copy paste

 

 

The darker jquery is not working.

[Seahorsepip 488]

The darker jquery is not working.

Try: 

$( window ).scroll(function() {
  if ($( window ).scrollTop() > $("#main").height()) {
    $('.header').addClass('darker');
  } else {
    $('.header').removeClass('darker');
  }
});

[OP ACTIONpack 341]

One last question. How to remove the class when it hits the bottom of the page because the background is dark now and hard to read the red. Thanks!

[Seahorsepip 488]

One last question. How to remove the class when it hits the bottom of the page because the background is dark now and hard to read the red. Thanks!

$( window ).scroll(function() {
  if($( window ).scrollTop() > $("#main").height()) {
    $('.header').addClass('darker');
  } else if($( window ).scrollTop() > $("#forth").offset().top) {
    $('.header').removeClass('darker');
  } else {
    $('.header').removeClass('darker');
  }
});

That should work.

[OP ACTIONpack 341]

$( window ).scroll(function() {
  if($( window ).scrollTop() > $("#main").height()) {
    $('.header').addClass('darker');
  } else if($( window ).scrollTop() > $("#forth").offset().top) {
    $('.header').removeClass('darker');
  } else {
    $('.header').removeClass('darker');
  }
});

That should work.

 

It's not work. :-/

[Seahorsepip 488]

It's not work. :-/

My bad, this should work:

$(window).scroll(function(){
    if($(window).scrollTop() > $("#forth").offset().top){
        $('.header').removeClass('darker');
    } else if($( window ).scrollTop() > $("#main").height()){
        $('.header').addClass('darker');
    } else {
        $('.header').removeClass('darker');
    }
});