jQuery 页面顶部滚动中固定导航栏demo效果：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .main {
      width: 1000px;
      margin: 0 auto;
    }
  </style>
  <script src="jquery-3.4.1.js"></script>
  <script>
    $(function () {
      var H = $(".nav").offset().top;
      $(window).scroll(function() {
        var docSccrollTop = $(document).scrollTop();
        if (docSccrollTop > H) {
          $(".nav").css({
            "position": "fixed",
            "top": 0
          });
          // 此时 nav 的位置固定，如果不设置 main 部分的 margin-top 的话，将有一部分内容被挡住 nav 的高度
          $(".main").css("margin-top", $(".nav").height());
        } else {
          $(".nav").css({
            "position": "static"
          });
          // 静态定位
          $(".main").css("margin-top", 0);
        }
      });
    })
  </script>
</head>
<body>
  <div class="top">
    <img src="images/top.png" />
  </div>
  <div class="nav">
    <img src="images/nav.png" />
  </div>
  <div class="main">
    <img src="images/main.png" />
  </div>
</body>
</html>
demo 效果：