粘性导航切换突兀引发滚动跳动问题求助

问题场景 #

我给网站制作了带粘性定位的导航，功能大体正常，但触发粘性定位时，页面内容会突然上移，滚动条出现突兀跳变。

现有代码 #

JavaScript 脚本 #

$(document).ready(function () {
  var NavY = $(".nav").offset().top;

  var stickyNav = function () {
    var ScrollY = $(window).scrollTop();

    if (ScrollY > NavY) {
      $(".nav").addClass("sticky");
    } else {
      $(".nav").removeClass("sticky");
    }
  };

  stickyNav();

  $(window).scroll(function () {
    stickyNav();
  });
});

HTML 结构 #

<div class="nav">
  <ol>
    <li>
      <a href="index.html"><i class="fas fa-home"></i> Strona Główna</a>
    </li>
    <li>
      <a href="kalkulatory.html"
        ><i class="fas fa-calculator"></i> Kalkulatory</a
      >
      <ul class="submenu">
        <li><a href="kalkulatory-kinematyka">Kinematyka</a></li>
        <li><a href="kalkulatory-dynamika">Dynamika</a></li>
        <li><a href="kalkulatory-bryla-sztywna">Bryła Sztywna</a></li>
        <li>
          <a href="kalkulatory-praca-moc-energia">Praca, Moc, Energia</a>
        </li>
        <li><a href="kalkulatory-grawitacja">Astronomia</a></li>
      </ul>
    </li>
    <li>
      <a href="#"><i class="fas fa-table-list"></i> Wzory Fizyczne</a>
      <ul class="submenu">
        <li><a href="wzory-kinematyka">Kinematyka</a></li>
        <li><a href="wzory-dynamika">Dynamika</a></li>
        <li><a href="wzory-bryla-sztywna">Bryła Sztywna</a></li>
        <li><a href="wzory-praca-moc-energia">Praca, Moc, Energia</a></li>
        <li><a href="wzory-astronomia">Astronomia</a></li>
      </ul>
    </li>
    <li>
      <a href="przeliczniki"
        ><i class="fa-solid fa-arrows-rotate"></i> Przeliczniki</a
      >
    </li>
    <li>
      <a href="zadania"><i class="fas fa-list-check"></i> Zadania</a>
    </li>
    <li>
      <a href="kontakt"><i class="fas fa-envelope"></i> Kontakt</a>
    </li>
  </ol>
</div>

CSS 样式 #

.sticky {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}
.nav {
  z-index: 1000;
  background-color: #333;
  padding: 12px 0;
  border-bottom: 2px solid #000;
  display: flex;
  justify-content: center;
  font-family: "Prompt", sans-serif;
  overflow: hidden;
}
.nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav ol li {
  position: relative;
}

.nav ol li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  align-items: center;
}

.nav ol li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav ol li a i {
  margin-right: 5px;
}

.nav ol li ul {
  display: none;
  position: absolute;
  top: calc(100% - 5px);
  left: 0;
  background-color: #444;
  padding: 10px;
  border-radius: 5px;
  min-width: 150px;
  animation: fadeIn 0.3s ease forwards;
  z-index: 1001; 
}

.nav ol li:hover > ul {
  display: block;
}

.nav ol li ul li {
  margin: 5px 0;
  list-style: none;
   padding-left: 25px; 
}

.nav ol li ul li a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap; 
}

问题原因 #

当导航添加sticky类切换为固定定位后，元素会脱离文档流，原来占据的空间被释放，下方内容会向上填充该空间，从而导致页面跳变。

解决方法 #

方法1：添加占位元素补偿空间 #

通过JS创建一个和导航高度一致的占位元素，在导航变为固定定位时显示占位元素，填补导航脱离后留下的空间。

修改后的JavaScript代码：

$(document).ready(function () {
  var $nav = $(".nav");
  var NavY = $nav.offset().top;
  var navHeight = $nav.outerHeight();
  // 创建占位元素
  var $placeholder = $('<div class="nav-placeholder"></div>').hide();
  $nav.after($placeholder);

  var stickyNav = function () {
    var ScrollY = $(window).scrollTop();

    if (ScrollY > NavY) {
      $nav.addClass("sticky");
      $placeholder.show().height(navHeight);
    } else {
      $nav.removeClass("sticky");
      $placeholder.hide();
    }
  };

  stickyNav();

  $(window).scroll(function () {
    stickyNav();
  });
});

方法2：使用原生CSS position: sticky（更简便） #

现代浏览器支持原生粘性定位，无需JS即可实现效果，且原生sticky会自动保留元素在文档流中的空间，不会出现跳变问题。

修改CSS中的.nav样式：

.nav {
  z-index: 1000;
  background-color: #333;
  padding: 12px 0;
  border-bottom: 2px solid #000;
  display: flex;
  justify-content: center;
  font-family: "Prompt", sans-serif;
  overflow: hidden;
  /* 添加以下两行 */
  position: sticky;
  top: 0;
}

之后可以移除原有的.sticky类和对应的JavaScript代码。

注意事项 #

• 方法2兼容性：position: sticky支持Chrome 56+、Firefox 32+、Edge 16+，需兼容旧浏览器建议用方法1。
• 使用原生sticky时，确保导航的父元素没有设置overflow: hidden，否则粘性定位会失效。

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