Sign in to follow this  
Followers 0

11 posts in this topic

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!

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

1 person likes this

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

The darker jquery is not working.

Try: 

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

Share this post


Link to post
Share on other sites

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!

Share this post


Link to post
Share on other sites

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.

Share this post


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

Share this post


Link to post
Share on other sites

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');
    }
});

Share this post


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
Sign in to follow this  
Followers 0

  • Recently Browsing   0 members

    No registered users viewing this page.