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

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>