How to setup css and javascript to resolve jumping of search results with sticky header?

Question

I am trying to run an experiment that makes use of a search engine in the back end and a search engine results page (SERP) on the front end.

I have placed a sticky header on the page where I display information to participants in my study (I have removed this to keep things simple for you, but the issue remains regardless).

The main issue being that when anyone scrolls down, the results jump (about the distance of the header size).

You can see the issue by looking at my codepen

I have looked through the suggestions here and here. Unfortunately still cannot crack what is wrong.

I have fiddled around with the css elements and the javascript per recommendations in those links to no avail. It still jumps!

Full code is at [codepen link here(https://codepen.io/steven_z/pen/MdGmJM). Below are snippets where I believe the issue lies (although it could be elswhere in css.

window.onscroll = function() {myFunction()};

var header = document.getElementById("myHeader");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}
.top-container {
  background-color: #f1f1f1;
  padding: 30px;
  text-align: center;
}

.header {
  background: #dbe7f9;
}

.content {
  padding: 16px;
}


.sticky {
  position: fixed;
  top: 0;
  width: 100%;

}

.sticky + .content {
  padding-top: 102px;
}

Ultimately, my hope is to prevent the jumping of the issue. After spending many hours trying to sort out the matter in css, I am now at a bit of a loss. Thank you for any suggestions.