javascript - 滚动到顶部后如何将导航栏的位置更改为固定？

Question

我想将导航栏位置更改为固定位置。

这是我的代码:

$(document).ready(function() {
  $(document).scroll(function() {
    var scroll = $(this).scrollTop();
    var topDist = $("#container").position();
    if (scroll > topDist.top) {
      $('nav').css({
        "position": "fixed",
        "top": "0"
      });
    } else {
      $('nav').css({
        "position": "static",
        "top": "auto"
      });
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <nav>
    <ul>
      <li><a href="#">LINK 1</a></li>
      <li><a href="#">LINK 2</a></li>
      <li><a href="#">LINK 3</a></li>
      <li><a href="#">LINK 4</a></li>
    </ul>
  </nav>

这是 demo link

Answer 1

您可以利用现在大多数浏览器都很好支持的 position: sticky 属性:

#container {
  position: sticky;
  top: 0;
}

https://jsfiddle.net/wqp9430L/

编辑:我想阐明为什么您的 JS 和整体解决方案不起作用。

你的 JS 实际上并没有触发，因为你在 $(document) 上检测到 scroll 但你的文档和窗口实际上没有滚动，因为你的内容是实际上在 .parallax 中滚动。因此，您不必检测文档上的滚动，而必须检测 parallax 上的滚动:

$(document).ready(function() {
  $('.parallax').scroll(function () {
      var scroll = $(this).scrollTop();
      var topDist = $("#container").offset();

      if (scroll > topDist.top) {
          $('nav').css({"position":"fixed","top":"0"});
      } else {
          $('nav').css({"position":"static","top":"auto"});
      }
  });
});

现在虽然这在获取实际滚动值方面有效:https://jsfiddle.net/wqp9430L/2/你会发现有几个问题。

1. 随着滚动偏移量的变化，因此您应该将 topDist 移到 scroll 函数之外以获得初始值，但是

2. 如果 fiddle 加载速度太快(在您的图像完成渲染之前)topDist 变得准确，因此您必须确保 topDist 在图像完全渲染，然后还有

3. 将您的 nav 更改为 position: fixed 会使您的导航 fixed 到 body 但由于您没有在body 而不是在 .parallax 中，您将看不到导航。

出于这些原因，您应该使用 CSS 解决方案，但如果您坚持使用 JS，您的解决方案应该看起来更像:

if (imgLoaded) {
  var topDist = $("#container").offset().top;

  $('.parallax').scroll(function () {
    var scroll = $(this).scrollTop();

    if (scroll > topDist) {
      $('nav').css({
        position: 'fixed',
        top: scroll + 'px'
      });
    } else {
      $('nav').css({
        position: 'static',
        top: 'auto'
      });
    }
  });
}