实现导航栏从position: relative到position: fixed的平滑过渡方案问询

问题根源 #

导航栏从position: relative切换到fixed后，会脱离文档流，原本占据的空间被释放，下方内容会突然上移，导致跳动。

两种可行解决方案 #

方案1：用占位容器填补空间 #

给导航栏同级加一个空容器，当导航栏固定时，让这个容器占据和导航栏一样的高度，避免内容上移。

修改后代码：

HTML

<nav>
  <ul>
    <li><a class="active" href="#home">link1</a></li>
    <li><a href="#news">link2</a></li>
  </ul>
  <ul class="trigger-pt">
    <li><a class="active" href="#home">Home</a></li>
    <li><a href="#news">News</a></li>
    <li><a href="#contact">Contact</a></li>
    <li><a href="#about">About</a></li>
  </ul>
</nav>
<div class="nav-placeholder"></div>
<div>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  <!-- 原文本省略 -->
</div>

CSS

body {
  margin: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 30px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #111;
}

body.fixed-nav nav {
  position: fixed;
  width: 100%;
  top: 0;
}

.nav-placeholder {
  display: none;
}
body.fixed-nav .nav-placeholder {
  display: block;
  /* 高度和导航栏实际高度一致，这里两个ul各占60px，合计120px */
  height: 120px;
}

JavaScript

const offset = document.querySelector('.trigger-pt').offsetTop;
const nav = document.querySelector('nav');
const placeholder = document.querySelector('.nav-placeholder');

// 动态获取导航栏高度，适配响应式
placeholder.style.height = `${nav.offsetHeight}px`;

document.addEventListener('scroll', () => {
  window.scrollY >= offset 
    ? document.body.classList.add('fixed-nav') 
    : document.body.classList.remove('fixed-nav');
});

方案2：通过body的padding补偿高度 #

不用额外加HTML元素，给body添加上内边距来填补导航栏脱离后留下的空间。

修改后代码：

CSS

body {
  margin: 0;
}

/* 原CSS不变，新增 */
body.fixed-nav {
  padding-top: 120px; /* 等于导航栏实际高度 */
}

body.fixed-nav nav {
  position: fixed;
  width: 100%;
  top: 0;
}

JavaScript

const offset = document.querySelector('.trigger-pt').offsetTop;
const navHeight = document.querySelector('nav').offsetHeight;

document.addEventListener('scroll', () => {
  if (window.scrollY >= offset) {
    document.body.classList.add('fixed-nav');
    // 动态设置padding，避免硬写值
    document.body.style.paddingTop = `${navHeight}px`;
  } else {
    document.body.classList.remove('fixed-nav');
    document.body.style.paddingTop = '0';
  }
});

注意事项 #

• 必须确保补偿的高度和导航栏实际高度完全一致，包括padding、border等，不然还是会有跳动。
• 给固定定位的导航栏加上top: 0，保证它固定在页面顶部。
• 用offsetHeight动态获取高度，能适配不同屏幕尺寸下的导航栏高度变化。

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