Jump to content



Photo

jQuery help with change color and background when scrolling

Answered Go to the full post

  • Please log in to reply
10 replies to this topic

#1 ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 04 March 2014 - 22:02

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!



Best Answer +Seahorsepip , 05 March 2014 - 19:19

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');
    }
});
Go to the full post



#2 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 04 March 2014 - 22:48

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.

#3 nelsontb

nelsontb

    Neowinian

  • Joined: 20-May 13

Posted 04 March 2014 - 22:49

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



#4 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 04 March 2014 - 22:49

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

#5 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 05 March 2014 - 12:29

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



#6 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 05 March 2014 - 13:54

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.



#7 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 05 March 2014 - 13:56

The darker jquery is not working.

Try: 

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


#8 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 05 March 2014 - 16:49

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!



#9 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 05 March 2014 - 17:12

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.



#10 OP ACTIONpack

ACTIONpack

    Graphic Designer

  • Tech Issues Solved: 1
  • Joined: 10-August 03
  • Location: Lawrenceville, GA
  • OS: Windows 8.1 Pro
  • Phone: Nokia Lumia 925 (T-Mobile)

Posted 05 March 2014 - 18:52

$( 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. :-/



#11 +Seahorsepip

Seahorsepip

    http://seapip.com

  • Tech Issues Solved: 15
  • Joined: 23-January 11
  • Location: Netherlands
  • OS: Windows 8.1 Pro
  • Phone: Nexus 5

Posted 05 March 2014 - 19:19   Best Answer

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




Click here to login or here to register to remove this ad, it's free!