CODEWITHSUNDEEP
jquerycssfadein
polonium
polonium

Reputation: 257

FadeIn header with .css() and .fadeIn

I want to fadeIn my header while scrolling through the page. This is what I've got so far, everything works except the .fadeIn().

$(document).scroll(function() {
    if( $(this).scrollTop() > 120 ) {
        if( !fixed ) {
            fixed = true;
            $('.mini-logo').css({display:'block'});
            $(' header ').css({background:'#323232'});
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('.mini-logo').css({display:'none'});
            $(' header ').css({background:'rgba(0,0,0,0)'});
        }
    }
});

Upvotes: 0

Views: 150

Answers (2)

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

You can do something simple like this JSFiddle: http://jsfiddle.net/eYcL4/:

var fixed = false;
$(document).scroll(function() {
    if( $(this).scrollTop() > 120 ) {
        if( !fixed ) {
            fixed = true;
            $('.mini-logo').css({display:'block'});
            $('header').css({background:'#323232'});
            $('header').fadeOut();
        }
    } else {
        if( fixed ) {
            fixed = false;
            $('.mini-logo').css({display:'none'});
            $('header').css({background:'rgba(0,0,0,0)'});
            $('header').fadeIn();
        }
    }
});

But the immediate problem is that fading out the header changes the height of the content (header collapses to 0 height when hidden).

Please explain the effect you are after.

Upvotes: 2

Patsy Issa
Patsy Issa

Reputation: 11293

Instead of $('.mini-logo').css({display:'none'}); use $('.mini-logo').fadeOut(); And instead of $('.mini-logo').css({display:'block'}); use $('.mini-logo').fadeIn();

Upvotes: 1

Related Questions