如何让图片对齐视口顶部并始终作为sticky-nav的背景显示

要实现sticky-nav始终以下方图片为背景，核心是让图片始终处于sticky-nav的底层，同时保证skinny-banner的正常显示和滚动隐藏逻辑。具体修改如下：

1. 调整HTML结构 #

将图片移入header内部作为背景层，放在wrapper之前，确保它处于sticky-nav的下方，能被半透明的导航透出：

<header>
  <img src="https://placekitten.com/1440/671" class="nav-bg" />
  <div class="wrapper">
    <div class="skinny-banner">Skinny banner that on scroll down disappears.</div>
    <div class="sticky-nav">Sticky Header that on scroll down sticks to top and shrinks in height when stuck
      <ul>
        <li>Flex items</li>
      </ul>
    </div>
  </div>
</header>

2. 修改CSS样式 #

• 给header设置相对定位，让内部背景图可基于它定位
• 给背景图设置绝对定位，铺满sticky-nav区域，层级低于导航
• 把sticky-nav的纯色背景改为透明，保留半透明和模糊效果
• 适配固定状态下的背景图尺寸和位置

body {
  margin: 0;
  height: 200vh;
}

header {
  position: relative;
}

.nav-bg {
  position: absolute;
  top: 40px; /* 对应skinny-banner的高度，让图片从导航区域开始显示 */
  left: 0;
  width: 100%;
  height: 120px; /* 对应导航初始高度 */
  object-fit: cover;
  z-index: 0;
}

.skinny-banner {
  background: lightblue;
  height: 40px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  z-index: 2;
  position: relative;
}

.sticky-nav {
  background: transparent; /* 改为透明，让背景图透出 */
  padding: 0 16px;
  height: 120px;
  opacity: 0.5;
  backdrop-filter: blur(20px);
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.sticky-nav ul {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 固定状态下的样式 */
.wrapper.isSticky .sticky-nav {
  position: fixed;
  top: 0;
  height: 66px;
  width: 100%;
}

.wrapper.isSticky .skinny-banner {
  display: none;
}

.wrapper.isSticky + .nav-bg {
  top: 0;
  height: 66px; /* 匹配固定状态下的导航高度 */
}

3. 优化JS逻辑（可选） #

原有滚动判断逻辑保留，添加节流优化滚动性能：

const wrapper = document.querySelector('.wrapper');
const skinnyBanner = document.querySelector('.skinny-banner');
let previousScrollY = window.scrollY;

function updateSticky() {
  const currentScrollY = window.scrollY;

  if (currentScrollY > skinnyBanner.offsetHeight) {
    wrapper.classList.add('isSticky');
  } else {
    wrapper.classList.remove('isSticky');
  }

  previousScrollY = currentScrollY;
}

// 用requestAnimationFrame节流，提升滚动流畅度
window.addEventListener('scroll', () => {
  requestAnimationFrame(updateSticky);
});

修改说明 #

• 背景图移入header并绝对定位，确保始终处于导航下方，不会被页面其他内容遮挡
• 移除导航的纯色背景，改为透明后，半透明和模糊效果能让背景图自然透出
• 背景图的top和height属性分别匹配导航在非固定/固定状态下的位置和高度，保证显示对齐
• 通过z-index层级控制，确保skinny-banner在最上层，导航在背景图之上

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