Using Javascript to make the header smaller on scrolling

Hi there:
I have used the code available on W3schools but when I use it on my localhost, it jitters at one point, so it is not smooth. What causes this, does anybody know?
It only does that at the beginning.
If you scroll fast it does not show but when I was testing it slowly it just looked like it was on speed or something.
Your help is appreciated.

<script type="text/javascript">
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop >100) {
    document.getElementById("header").style.height = "50px";
   
  } else {
    document.getElementById("header").style.height = "100px";        
  }
}
</script>

I’m taking a guess just based off looking at the code you posted, but I could imagine that the header changing sizes shifts the scroll offset value. Try logging that value ot the top of the function and see what it shows.

I fixed the issue, a stupid error that took me a while to see, I used “sticky” in stead of “fixed” in my CSS code. I feel such an idiot at the age of 64.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.