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

Question

I want to change my navbar position to fixed.

Here is my code:

 $(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> 

This is the demo link

Answer 1

You can utilize the position: sticky property which is well supported now on most browsers:

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

https://jsfiddle.net/wqp9430L/

Edit: I want to shed some light on why your JS and overall solution doesn't work.

Your JS isn't actually triggering because you're detecting scroll on the $(document) but your document and window isn't actually scrolling because your content is actually scrolling within .parallax . So instead of detecting the scroll on document you have to detect scroll on 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"});
      }
  });
});

Now while this works in terms of getting actually scroll values: https://jsfiddle.net/wqp9430L/2/ you'll notice there's a few issues.

1. As you scroll the offset changes, so you should move topDist outside of the scroll function to get the initial value, but

2. If the fiddle loads too quickly (before you images finishes rendering) topDist becomes in accurate, so you'll have to ensure topDist is calculated after the images are fully rendered, then there's also

3. Changing your nav to position: fixed makes your nav fixed to the body but since you're not scrolling in the body but rather in .parallax you won't see the nav.

For these reason you should use the CSS solution, but if you insist on using JS you solution should look more like:

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