javascript - 如何将 css 转换添加到标题中的 js 滚动？

Question

当页面向下滚动时，我有一个标题出现。我正在尝试添加 css 转换以使其淡入淡出，因为我读过使用 javascript 进行淡入淡出的效率不高。

.header-wrapper {
    top:0;
    left:0;
    right:0;
    position: fixed;
    display:none;
    height: 60px;
    border-top: 1px solid #000;
    background: red;
    z-index: 1;
}
.header-wrapper.active {
     display:block;   
}
.header {
    background-color:#000;
    height:80px;
}

Here is the js fiddle

$(window).scroll(function () {
    var y = $(window).scrollTop();

    // if above 300 and doesn't have active class yet
    if (y > 300 && !$('.header-wrapper').hasClass('active')) {
        $('.header-wrapper').addClass('active');

    // if below 300 has still has active class
    } else if(y <= 300 && $('.header-wrapper').hasClass('active')) {
        $('.header-wrapper').removeClass('active');
    }
    });

Answer 1

过渡是使用 css3 属性 transition 添加的。

造成混淆的一个常见原因:您只能转换接受数值的属性。因此，您不能在 display: block 和 display: none 之间转换。

但是您可以在 opacity: 0 和 opacity: 1 之间转换:

transition: 0.5s 不透明度

看起来像这样:

.bottomMenu {
    ...
    opacity: 0;
    transition: 0.5s opacity;
    ...
}
.bottomMenu.active {
     opacity: 1;   
}

对于您的特殊情况，我可能建议在 0 和 60px 之间转换高度。

为此你可以使用:

transition: 0.5s 高度

所以:

.bottomMenu {
    ...
    height: 0;
    transition: 0.5s height;
    ...
}
.bottomMenu.active {
     height: 80px;   
}