• 0

jQuery help with change color and background when scrolling


Go to solution Solved by Seahorsepip,

Question

ACTIONpack

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!

Link to post
Share on other sites

10 answers to this question

Recommended Posts

  • 0
Seahorsepip

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');
    }
});
Link to post
Share on other sites
  • 0
Seahorsepip

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.
Link to post
Share on other sites
  • 0
nelsontb

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

  • Like 1
Link to post
Share on other sites
  • 0
Seahorsepip

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

Link to post
Share on other sites
  • 0
Seahorsepip

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 ^^

Link to post
Share on other sites
  • 0
ACTIONpack

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.

Link to post
Share on other sites
  • 0
Seahorsepip

The darker jquery is not working.

Try: 

$( window ).scroll(function() {
  if ($( window ).scrollTop() > $("#main").height()) {
    $('.header').addClass('darker');
  } else {
    $('.header').removeClass('darker');
  }
});
Link to post
Share on other sites
  • 0
ACTIONpack

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!

Link to post
Share on other sites
  • 0
Seahorsepip

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.

Link to post
Share on other sites
  • 0
ACTIONpack
$( 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. :-/

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.