带有.css()和.fadeIn的.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').fadeIn();代替$('.mini-logo').css({display:'block'});