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

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> 

这是演示链接

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. 如果小提琴加载得太快（在图像完成渲染之前） topDist变得准确，那么您必须确保在完全渲染图像之后计算topDist ，然后还要

3. 将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'
      });
    }
  });
}