Fade in header when adding and removing classes with jQuery

Question

I'm designing a nav that has the background bar appear after the user has scrolled down the page a bit. When they scroll back to the top, the bar (background color) disappears. I'm doing it using the instructions over at:

Add/remove class with jquery based on vertical scroll?

It works fine but now I would like to add fading in and out of the bar on scroll. I've tried adding the fadeIn() and fadeOut() methods. Problem is when it fades out, it fades out the whole #nav div! Not just the background colour. Here's the query

$(function() {
//caches a jQuery object containing the header element
var header = $('.noBackground');
$(window).scroll(function() {
    var scroll = $(window).scrollTop();

    if (scroll >= 500) {
        header.removeClass('noBackground').addClass('blackBackground').fadeIn();
    } else {
        header.removeClass('blackBackground').fadeOut().addClass('noBackground');
    }
});
});

Full, HTML, CSS and jQuery on this fiddle

If I understand your question, you want to animate the background of a <div>. Take a look at this - jqueryui.com/animate. — Ilia Frenkel
– Ilia Frenkel, Commented Mar 25, 2013 at 5:41
You can't really fade colors with jQuery unless you use jQuery UI or the color plugin, but why not use CSS3 transitions ? — adeneo
– adeneo, Commented Mar 25, 2013 at 5:44
I'm using addClass to load .blackBackground and removeClass to to load noBackground. There is noBackground by default. CSS transitions doesn't work because I want the class to switch, triggering the fade at a certain point. — Matt Lambert
– Matt Lambert, Commented Mar 25, 2013 at 5:53

Subedi Kishor · Accepted Answer · 2013-11-12 12:00:34Z

1

The problem here is your #nav div is hidden when you scroll back to top. It is because the .fadeOut() method hides the matched elements by fading them to transparent. So you you remove .fadeOut() from else condition and it works fine.

Here is the edited code.

$(function() {
    //caches a jQuery object containing the header element
    var header = $('.noBackground');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            header.removeClass('noBackground').addClass('blackBackground').fadeIn();
        } else {
            header.removeClass('blackBackground').addClass('noBackground');
        }
    });
});

Edit:

A simple twist will show the effect:

$(function() {
    //caches a jQuery object containing the header element
    var header = $('.noBackground');
    $(window).scroll(function() {
        var scroll = $(window).scrollTop();

        if (scroll >= 500) {
            if(header.hasClass('noBackground')) {
                header.hide();
                header.removeClass('noBackground')
               .addClass('blackBackground').fadeIn(2000);
            }
        } else {
            if(header.hasClass('blackBackground'))  {   
                header.hide();
                header.removeClass('blackBackground')
               .addClass('noBackground').fadeIn(2000);
            }
        }
    });
});

Demo Fiddle.

edited Nov 12, 2013 at 12:00

answered Mar 25, 2013 at 6:05

Subedi Kishor

5,9945 gold badges38 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matt Lambert Over a year ago

Thanks, I did notice that but there are a couple draw backs. For some reason there is no actual fade. It just snaps into appearance with no fade. Also, is there no way to reverse that effect when you scroll back up to the top?

Bhargavi Gunda · Accepted Answer · 2013-03-25 05:57:05Z

0

fadeOut() method can be implemented on a jquery element,not on a class..your code is working perfectly fine

answered Mar 25, 2013 at 5:57

Bhargavi Gunda

3541 gold badge2 silver badges15 bronze badges

Collectives™ on Stack Overflow

Fade in header when adding and removing classes with jQuery

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related