如何为向下滚动消失的Header添加0.5s缓入缓出过渡效果

问题根源在于你的transition属性仅定义在.header__top类中，当向下滚动时你移除了这个类并添加.nav_up，此时header元素失去了过渡属性，导致消失动作瞬间完成，没有动画效果。

只需调整CSS结构并简化JS逻辑即可解决：

1. 调整CSS样式 #

将transition属性移到header的基础样式中，确保无论切换哪个类，过渡效果始终生效；同时让.header__top和.nav_up仅控制top值：

body{
  height: 30000px;
  background-color: lightblue;
  color: white;
}
header {
  width: 100%;
  height: 120px;
  background-color: #000;
  position: fixed;
  top: 0px;
  z-index: 5;
  border-bottom: 0.02rem solid #000 ;
  display: flex;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
  transition: top 0.5s ease-in-out; /* 移到基础样式，确保过渡始终生效 */
}
.header__top { /* 维持显示状态的top值 */
  top: 0px;
}
.nav_up { /* 控制隐藏状态的top值 */
  top: -120px;
}

2. 简化JS类切换逻辑 #

不需要移除header的基础类，只需要切换.header__top和.nav_up即可，避免丢失过渡属性：

////Header scroll effect//////

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 10;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(){
    didScroll = true;
});

setInterval(function() {
    if (didScroll) {
        hasScrolled();
        didScroll = false;
    }
}, 250);

function hasScrolled() {
    var st = $(this).scrollTop();
    
    // Make sure user scroll more than delta
    if(Math.abs(lastScrollTop - st) <= delta)
        return;
    
    // If user scrolled down and are past the navbar, add class .nav_up.
    if (st > lastScrollTop && st > navbarHeight){
        // Scroll Down Disappear
        $('header').removeClass('header__top').addClass('nav_up');
        $('label').removeClass('menu__btn').addClass('nav_up');
    } else {
        // Scroll Up Reappear
        if(st + $(window).height() < $(document).height()) {
            $('header').removeClass('nav_up').addClass('header__top');
            $('label').removeClass('nav_up').addClass('menu__btn');
        }
    }
    
    lastScrollTop = st;
}

3. 保持HTML结构不变 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<header class="header__top">
   <p>header</p>
</header>
</body>

这样修改后，无论是向上滚动显示还是向下滚动隐藏，header都会应用0.5s的ease-in-out过渡效果，符合预期。

内容的提问来源于stack exchange，提问作者Aarroonn