jQuery remove fixed class when scrolling back up

I am having some issue with removeClass() in jquery. I have read many posts about this and still can't find my mistake. Any pointers from community would be most welcome!

When scrolling down in this snippet, the fixed class will be added to the blue bar. When scrolling back up, it is not removed. I don't understand it. Anyone can tell me what I am doing wrong?

$(document).ready(function() {
  $(window).on("scroll", (event) => {
    const $header = $('.table-header');
    const distanceToTop = $header.offset().top; // find distance to top
    const y = $(window).scrollTop(); // find current scroll position
    if (y >= distanceToTop) $header.addClass('fixed');
    else $header.removeClass('fixed');
  });
});

div.table {
  min-height: 2000px;
  background: #b0b0b0;
}

.table-header.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="header-container mt-5 mb-2">
    <h1 class="h4">Toggle fixed class</h1>
  </div>
  <div class="table">
    <div class="table-row table-header relative bg-primary text-light mb-1">
      This is the fixed div
    </div>
    <div id="contacts-list" class="">

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

Solution

Put your distanceToTop variable outside the scroll function, it'll always be equal to your y variable when you'll scroll down.

You need to instanciate your offset top of table header only one time, when you scroll down, the offset top of the table is equal to your window scroll top.

$(document).ready(function() {
  const distanceToTop = $('.table-header').offset().top; // find distance to top
  $(window).on("scroll", (event) => {
    const $header = $('.table-header');
    const y = $(window).scrollTop(); // find current scroll position
    if (y >= distanceToTop) $header.addClass('fixed');
    else $header.removeClass('fixed');
  });
});

$(document).ready(function() {
  const distanceToTop = $('.table-header').offset().top; // find distance to top
  $(window).on("scroll", (event) => {
    const $header = $('.table-header');
    const y = $(window).scrollTop(); // find current scroll position
    if (y >= distanceToTop) $header.addClass('fixed');
    else $header.removeClass('fixed');
    
    console.log(y);
    console.log(distanceToTop);
  });
});

div.table {
  min-height: 2000px;
  background: #b0b0b0;
}

.table-header.fixed {
  position: fixed;
  top: 0;
  width: 100%;
  margin: auto;
  -webkit-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  -moz-box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
  box-shadow: 0 3px 5px rgba(57, 63, 72, 0.3);
}

<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>

<body>
  <div class="header-container mt-5 mb-2">
    <h1 class="h4">Toggle fixed class</h1>
    <div class="relative text-right">
      <input name="search-input" id="search-input" class="" type="search" placeholder="Search a contact ...">
    </div>
  </div>
  <div class="table">
    <div class="table-row table-header relative bg-primary text-light mb-1">
      Fixed div
    </div>
    <div id="contacts-list" class="">

    </div>
  </div>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>

</html>

Wish I did helped you