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并未真正触发，因为您正在scroll上检测到$(document)，但是文档和窗口并未真正滚动，因为您的内容实际上是在.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/，您会发现有一些问题。

滚动偏移量更改时，应将topDist函数移至scroll函数之外以获取初始值，但是
如果小提琴加载得太快（在图像完成渲染之前）topDist变得准确，因此您必须确保topDist是在完全渲染图像之后计算出来的，然后还有
将nav更改为position: fixed会使导航fixed变为正文，但是由于您不是在正文中滚动，而是在.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'
      });
    }
  });
}

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

1 个答案:

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