Заголовок FadeIn с .css() и .fadeIn

Question

Я хочу fadeIn мой заголовок, прокручивая страницу. Это то, что у меня есть до сих пор, все работает, кроме .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)'}); 
     } 
    } 
}); 

Answer 1

Вы можете сделать что-то простое, как этот 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(); 
     } 
    } 
}); 

Но непосредственную проблема в том, что выведение заголовок изменяет высоту содержимого (заголовок сжимается до 0 высоты при скрытии).

Пожалуйста, объясните, какой эффект вы после.

Answer 2

Вместо $('.mini-logo').css({display:'none'}); использование $('.mini-logo').fadeOut(); И вместо $('.mini-logo').css({display:'block'}); использования $('.mini-logo').fadeIn();