Sticky navigation sticks too suddenly

Question

I created navigation for my website and added the script:

       <script>
         $(document).ready(function () {
           var NavY = $(".nav").offset().top;

           var stickyNav = function () {
             var ScrollY = $(window).scrollTop();

             if (ScrollY > NavY) {
               $(".nav").addClass("sticky");
             } else {
               $(".nav").removeClass("sticky");
             }
           };

           stickyNav();

           $(window).scroll(function () {
             stickyNav();
           });
         });
       </script>

      <div class="nav">
        <ol>
          <li>
            <a href="index.html"><i class="fas fa-home"></i> Strona Główna</a>
          </li>
          <li>
            <a href="kalkulatory.html"
              ><i class="fas fa-calculator"></i> Kalkulatory</a
            >
            <ul class="submenu">
              <li><a href="kalkulatory-kinematyka">Kinematyka</a></li>
              <li><a href="kalkulatory-dynamika">Dynamika</a></li>
              <li><a href="kalkulatory-bryla-sztywna">Bryła Sztywna</a></li>
              <li>
                <a href="kalkulatory-praca-moc-energia">Praca, Moc, Energia</a>
              </li>
              <li><a href="kalkulatory-grawitacja">Astronomia</a></li>
            </ul>
          </li>
          <li>
            <a href="#"><i class="fas fa-table-list"></i> Wzory Fizyczne</a>
            <ul class="submenu">
              <li><a href="wzory-kinematyka">Kinematyka</a></li>
              <li><a href="wzory-dynamika">Dynamika</a></li>
              <li><a href="wzory-bryla-sztywna">Bryła Sztywna</a></li>
              <li><a href="wzory-praca-moc-energia">Praca, Moc, Energia</a></li>
              <li><a href="wzory-astronomia">Astronomia</a></li>
            </ul>
          </li>
          <li>
            <a href="przeliczniki"
              ><i class="fa-solid fa-arrows-rotate"></i> Przeliczniki</a
            >
          </li>
          <li>
            <a href="zadania"><i class="fas fa-list-check"></i> Zadania</a>
          </li>
          <li>
            <a href="kontakt"><i class="fas fa-envelope"></i> Kontakt</a>
          </li>
        </ol>
      </div>

.sticky {
  width: 100%;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
}
.nav {
  z-index: 1000;
  background-color: #333;
  padding: 12px 0;
  border-bottom: 2px solid #000;
  display: flex;
  justify-content: center;
  font-family: "Prompt", sans-serif;
  overflow: hidden;
}
.nav ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
}

.nav ol li {
  position: relative;
}

.nav ol li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  transition: background-color 0.3s, color 0.3s;
  display: flex;
  align-items: center;
}

.nav ol li a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.nav ol li a i {
  margin-right: 5px;
}

.nav ol li ul {
  display: none;
  position: absolute;
  top: calc(100% - 5px);
  left: 0;
  background-color: #444;
  padding: 10px;
  border-radius: 5px;
  min-width: 150px;
  animation: fadeIn 0.3s ease forwards;
  z-index: 1001; 
}

.nav ol li:hover > ul {

  display: block;
}

.nav ol li ul li {
  margin: 5px 0;
  list-style: none;
   padding-left: 25px; 
}

.nav ol li ul li a {
  color: #fff;
  text-decoration: none;
  white-space: nowrap; 
}

I also added the appropriate styles and more or less everything works. The problem is that when the user gets to the point where the navigation should stick, the navigation is sticky, but it cause terribly sharpy scrolling. The point is that when the navigation is sticky, all the content moves up and the scroll bar jumps between these extreme points. You can try it on: https://fizykafascynuje.pl/

I tried many things but unfortunately I'm new to programming and I couldn't do it.