CSS Position Sticky滚动时Banner过渡抖动问题求助

问题描述 #

实现双栏布局：左侧为菜单侧边栏，右侧为主内容区。主内容区的Banner由两个SVG构成，需求是向下滚动时Banner部分隐藏（仅显示底部，Logo消失），向上滚动时完全展示。但滚动回顶部时过渡不流畅，呈现两段式抖动而非平滑运动，其余功能均符合预期。

抖动原因分析 #

1. 布局高度突变触发scrollTop跳变：当前用top: -80px隐藏Banner上部，会直接改变main元素的可滚动区域高度。移除scrolled类时，Banner恢复原位置，main内容高度突然增加，浏览器会自动调整scrollTop值，导致视觉抖动。
2. 状态切换逻辑生硬：基于固定阈值（80px）直接切换类，未考虑过渡过程中的滚动状态变化，容易触发频繁的类添加/移除操作，打断动画流畅性。
3. Logo隐藏方式破坏布局稳定：使用display: none隐藏Logo会瞬间移除元素占位，进一步加剧布局高度突变。

解决方案 #

1. 用transform替代top属性：transform: translateY()不影响文档流，不会改变可滚动区域高度，避免浏览器自动调整scrollTop。
2. 优化状态切换逻辑：增加过渡锁，避免动画期间重复触发scroll事件；调整Banner恢复条件为滚动到顶部，减少不必要的状态切换。
3. 平滑隐藏Logo：用opacity替代display: none，保留元素占位，维持布局稳定。

修改后的代码 #

HTML（无需调整） #

<div class="sidebar nav navbar flex-shrink-0" style="width: 280px">
  <!-- sidebar... -->
</div>

<!-- This is for inserting the contents of the page -->
<main id="main-content-block" style="margin-top: -10px;">
  <div id="banner-wrapper" class="banner-wrapper">
    <div id="org-banner" class="banner">
      <svg width="3000" height="130" xmlns="http://www.w3.org/2000/svg">
          <rect x="0" y="0" width="3000" height="80" fill="red" />
          <rect x="0" y="80" width="3000" height="25" fill="orange" />
          <rect x="0" y="105" width="3000" height="25" fill="coral" />
      </svg>
    </div>

    <div id="crest-container">
          <div class="crestbg">
            <svg width="125" height="125" xmlns="http://www.w3.org/2000/svg">
                <rect x="0" y="0" width="125" height="125" fill="maroon" />
            </svg>
          </div>
    </div>

  </div>

  <!-- Content -->
  <hr>

</main>

CSS修改部分 #

/* Note: I also use bootstrap.css styling, v5.3.3 */

body {
    font-family: "Roboto";
    display: flex;
    flex-direction: row;
    height: 100vh;
}

main {
    height: 100vh;
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px 10px 10px 10px;
}

/* For banner */

#banner-wrapper {
    position: sticky;
    top: 0;
    z-index: 10;
    margin: -8px -10px 30px -10px;
    height: 130px;
    overflow: hidden;
    /* 明确指定过渡属性，避免all带来的性能损耗 */
    transition: transform 0.5s ease-out;
}

.banner svg {
    height: 130px;
    top: 0px;
}

/* Positions the crest within the banner BG. */ 
.crestbg svg {
    height: 130px;
    position: absolute;
    top: 0px;
    right: 40px;
}

.banner a {
    text-decoration: none;
}

/* CSS for hiding banner partially when scrolling */

header {
    height: 80px;
    transition: height 0.5s ease-out;
}

header.scrolled {
    height: 50px;
}
/* 替换top为transform，避免布局高度变化 */
#banner-wrapper.scrolled {
    transform: translateY(-80px);
}
/* 用opacity替代display:none，添加平滑过渡 */
#crest-container {
    transition: opacity 0.3s ease-out;
}
#crest-container.scrolled {
    opacity: 0;
    pointer-events: none;
}

JS修改部分 #

// For banner scrolling.
const mainContentEle = document.getElementById('main-content-block')
const headerElement = document.querySelector('header')
const svgBannerContainer = document.getElementById('banner-wrapper')
const crestContainer = document.getElementById('crest-container')

let isScrolled = false;
const scrollThreshold = 80;
const transitionDuration = 500; // 与CSS过渡时间保持一致
let transitionInProgress = false;

mainContentEle.addEventListener('scroll', () => {
  if (transitionInProgress) return;

  const currentScrollTop = mainContentEle.scrollTop;

  // 向下滚动超过阈值，切换到收起状态
  if (!isScrolled && currentScrollTop > scrollThreshold) {
    isScrolled = true;
    svgBannerContainer.classList.add('scrolled');
    headerElement.classList.add('scrolled');
    crestContainer.classList.add('scrolled');
    transitionInProgress = true;
    setTimeout(() => {
      transitionInProgress = false;
    }, transitionDuration);
  } 
  // 滚动到顶部时，恢复展开状态
  else if (isScrolled && currentScrollTop <= 0) {
    isScrolled = false;
    svgBannerContainer.classList.remove('scrolled');
    headerElement.classList.remove('scrolled');
    crestContainer.classList.remove('scrolled');
    transitionInProgress = true;
    setTimeout(() => {
      transitionInProgress = false;
    }, transitionDuration);
  }
});

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