How to make a fixed header change colour on scroll

Question

When I say header I mean a <h1>. But I have a fixed header on the left side of my page and I am using a parallax so that as I scroll down the background div changes.

I want the colour of h1 to change as I scroll down, exactly like this website does. (check the nightshift header on the top left!).

I have tried using Jquery like this:

if($(window).scrollTop() > 2600) {
    $(".leftHeaders a").css("color", "black");

But you dont get the cool transition of colour as you scroll down.

If you inspect the page you linked to you can see how it's being done; the 'nightshift' wording is two separate SVG - one black and one white. These are then being clipped in line with the boundary between slides to give the transition effect. This is *far* more complicated than just changing the CSS properties of an element — Rory McCrossan, Nov 25 '16 at 11:12
You can see question already asked before: [http://stackoverflow.com/questions/21757193/change-background-of-fixed-header-when-scrolling-past-elements] — Indhu, Nov 25 '16 at 11:14

score 1 · Answer 1 · answered Nov 25 '16 at 11:22

1

You should put your code inside $(window).scroll() like this

$(window).scroll(function() {    
   if($(window).scrollTop() > 2600) {
    $(".leftHeaders a").css("color", "black");
  }
});

answered Nov 25 '16 at 11:22

Gayane

547
4
12

score 0 · Answer 2 · answered Nov 25 '16 at 11:17

You forgot to use event listener, and trying to change color only once.

You can try something like this:

$(document).on('scroll', function () {
    
    console.log($(window).scrollTop());
  
    if ($(window).scrollTop() > 2600) {
      $(".leftHeaders a").css("color", "black");
    }
      
})

score 0 · Answer 3 · edited May 23 '17 at 12:17

0

try something like this:

$(window).on("scroll", function() {
  if($(window).scrollTop() > 2600) {
    //add black background
    $(".leftHeaders a").css("color", "black");
  } 
  else {
    //remove background
  }
});

you can refer to this old question i posted time ago: wrap code in a function. noob here :)

edited May 23 '17 at 12:17

Community

1
1

answered Nov 25 '16 at 11:22

Paolo

704
9
24

score 0 · Answer 4 · answered Nov 25 '16 at 11:33

I think You want something like this-

$(window).scroll(function() {
                var top = $(this).scrollTop();
                if (top > 2600) {
                   $(".leftHeaders a").css("color", "black");

                } 
               else {
                   $(".leftHeaders a").css("color", "red");

                }

 })

How to make a fixed header change colour on scroll

4 Answers4