How to fix header scroll effect (per pixel adding/removing value)?

Question

JavaScript

The scroll API is already brainwashing ;(
Please help. It is required to achieve the following behavior from the header when scrolling:
1. The initial state is `absolute`. It changes to `fixed` only when the scroll is scrolled by the size of the header. This is fundamentally important. It seems to be done.
2. Back `absolute` becomes when scrolling to the very
top.It's sort of done.3.When scrolling up, `fixed` should be added pixel by pixel, the same as the scroll speed.That's sort of done.
4. And here the brain refuses to work. When scrolling down, when not the initial one, but when the scrolling up worked, a bug. I can't figure out how to calculate the value here. To make it clearer - if you scroll down from the very top, then scroll up until the header pops out (but not to the end of the page itself), and then down again - you can see the blinking. This is a crooked calculation of the value, it exceeds the limit.
5. Also a small bug (but not as important as point 4): if you refresh the page (important!), then slowly scroll the header about half way down, and then try up - it disappears. How can I fix it without breaking everything else?
6. And in general, how to optimize this shit code? I'm sure that I'm calculating everything crookedly, but these scroll events are just generally painful.
Thank you so much if someone looks at this noodle, because I'm all...
https://codepen.io/kode88/pen/qQorRZ

Answer 1

Everything looks somehow complicated, even to disassemble laziness. So instead of "fixing" we will write again.
The header offset will always and without any checks be calculated as the previous offset value plus the scroll change. And limit it with Math.min/Math.max (0/minus element height). We will apply the offset when position is set to fixed.
Setting the position value depending on the scroll. There are three cases: the scroll exceeds the height of the header - fixed; scroll is 0 - absolute; the rest is unchanged.
Accordingly, instead of five properties, only two are enough: the header offset and the previous scroll value.
https://jsfiddle.net/dsbj3h4c/