如何用CSS让粘性导航栏固定在视口顶部并调整样式

要实现topnav粘住时移到视口顶部消除间隙并调整高度的效果，你需要修正sticky定位的应用对象，再结合滚动监听动态修改样式，具体实现如下：

步骤1：修正Sticky定位逻辑 #

原代码将position: sticky错误地应用在topnav a标签上，且sticky-container使用fixed定位会直接固定在顶部，导致初始状态覆盖窄横幅。正确的做法是给sticky-container设置sticky定位，初始粘住位置在窄横幅下方。

步骤2：添加滚动监听动态调整样式 #

通过监听页面滚动距离，当滚动超过窄横幅高度时，给topnav添加自定义类，修改其位置和高度。

修改后的完整代码 #

CSS代码

.skinny-banner {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    background-color: lightyellow;
    width: 100%;
    height: 40px;
    gap: 24px;
    padding-right: 40px;
    font-size: 14px;
    font-weight: 300;
}

.skinny-nav-menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 修正sticky容器定位 */
.sticky-container {
    position: sticky;
    top: 0;
    width: 100%;
    transition: all 0.3s ease;
}

.topnav {
  background-color: #333;
  overflow: hidden;
  transition: all 0.3s ease;
}

.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.topnav a:hover {
  background-color: #ddd;
  color: black;
}

.topnav a.active {
  background-color: #04AA6D;
  color: white;
}

/* 粘住后的样式：移到视口顶部+调整高度 */
.sticky-container.stuck {
    top: 0;
}

.topnav.stuck {
    height: 50px; /* 自定义粘住后的高度 */
}

.topnav.stuck a {
    padding: 13px 16px; /* 调整内边距适配新高度 */
}

.content {
  height: 500px;
  background-color: lightblue;
}
.content-1 {
  height: 500px;
  background-color: lightsalmon;
}
.content-2 {
  height: 500px;
  background-color: lightgreen;
}

HTML代码

<div class="skinny-banner">
  <ul class="skinny-nav-menu">
    <li><a href="#">Item one</a></li>
    <li><a href="#">Item two</a></li>
    <li><a href="#">Item three</a></li>
  </ul>
</div>

<div class="sticky-container">
  <div class="topnav">
    <a class="active" href="#home">Home</a>
    <a href="#news">News</a>
    <a href="#contact">Contact</a>
    <a href="#about">About</a>
  </div>
</div>

<div class="content"></div>
<div class="content-1"></div>
<div class="content-2"></div>

<script>
// 监听滚动事件触发样式变化
window.addEventListener('scroll', function() {
    const bannerHeight = document.querySelector('.skinny-banner').offsetHeight;
    const stickyContainer = document.querySelector('.sticky-container');
    const topnav = document.querySelector('.topnav');
    
    if (window.scrollY >= bannerHeight) {
        stickyContainer.classList.add('stuck');
        topnav.classList.add('stuck');
    } else {
        stickyContainer.classList.remove('stuck');
        topnav.classList.remove('stuck');
    }
});
</script>

关键说明 #

• transition属性让样式变化更平滑，避免突兀跳转。
• 你可以根据需求修改.topnav.stuck中的height值，以及对应的链接内边距，适配不同高度需求。
• JS监听滚动距离，当滚动超过窄横幅高度（40px）时，触发粘住状态的样式。

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