Change background of fixed header when scrolling past elements

Question

I'm trying to get the background-color of my fixed header to change upon scrolling over certain DIV sections on the page, similar to this:

http://www.adamrudzki.com/

The sections I'm using don't have a fixed height.

I've found this similar question Change background-color while scrolling

( which uses this fiddle http://jsfiddle.net/cEvJk/18/ )

var t = $('#about').offset().top - 100;

$(document).scroll(function(){
    if($(this).scrollTop() > t)
    {   
        $('header').css({"background-color":"green"});
    } 
});

But I'm unable to get the effect to repeat for all sections.

In the [example](http://www.adamrudzki.com/) you give The header is actually has a transparent background. — roydukkey, Feb 13 '14 at 14:41
Can you show your fiddle or any demo link where you are working currently? — Dhiraj, Feb 13 '14 at 14:47
Hi Dhiraj Shah, I have uploaded an example of the site so far to http://www.jiraff.co.uk/demo/demo.html — Dale Irwin, Feb 13 '14 at 15:09

score 5 · Accepted Answer · answered Feb 13 '14 at 15:10

5

Try this :

var t = $('#about').offset().top - 100;
var t1 = $('#work').offset().top - 100;

$(document).scroll(function(){
    if($(this).scrollTop() > t1) {   
        $('header').css({"background-color":"blue"});
    } else if($(this).scrollTop() > t) {   
        $('header').css({"background-color":"green"});
    } else {
        $('header').css({"background-color":"#520833"});
    }
});

And so on with var t2 = ....

Don't forget to put higher values on top of the if's

answered Feb 13 '14 at 15:10

Serge K.

5,303
1
20
27

This worked fantastically. Thank you very much for your help Nathan P! – Dale Irwin Feb 13 '14 at 16:16
Pleased to help you :) – Serge K. Feb 13 '14 at 16:17
I've noticed that the way I have set it up can make it perform slightly differently if the window is resized - Do you know if there's anything that could be done to make this script refresh upon browser resize? – Dale Irwin Feb 13 '14 at 21:36
@DaleIrwin See [here](http://stackoverflow.com/questions/599288/cross-browser-window-resize-event-javascript-jquery) – Serge K. Feb 14 '14 at 06:01

apaul · Answer 2 · 2014-02-13T16:32:26.963

You could simplify things a bit by using jQuery's .each() method like this:

Working Example

$(window).scroll(function () {
    $('.sect').each(function () {
        var w = $(window).scrollTop();
        var t = $(this).offset().top - 100;
        if (w > t) {
            $('header').css({
                "background-color": $(this).css('background-color')
            });
        }
    });
});

From the documentation:

The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element.

This is the way to do it man. Why would you want to hardcode the values like in the previous answers. Just imagine if you have more sections or when you add new sections, do you want to go back to your script and add more js? This is safe :) — Dhiraj, Feb 13 '14 at 17:29

Lokesh Suthar · Answer 3 · 2014-02-13T15:34:06.223

Okay so I came up with THIS FIDDLE

$(document).scroll(function () {
    var x = $(this).scrollTop(),
        home = $('#home'),
        about = $('#about'),
        work = $('#work'),
        contact = $('#contact');

    if (x >= home.offset().top && x < (home.offset().top + home.height())) {
        $('header').css("background-color", "red");
    }
    if (x >= about.offset().top && x < (about.offset().top + about.height())) {
        $('header').css("background-color", "green");
    }
    if (x >= work.offset().top && x < (work.offset().top + work.height())) {

        $('header').css("background-color", "blue");
    }
    if (x >= contact.offset().top && x < (contact.offset().top + contact.height())) {
        $('header').css("background-color", "orange");
    }
});

Change background of fixed header when scrolling past elements

3 Answers3

Linked