I am animating divs to shrink when they start to get to the top of a page. Unfortunately, scrollTop is a pixel number which is not responsive-friendly since the pixel amounts will be different for every device.

My solution is to use percentage of the window but I'm still learning and I'm not sure how to do it. This is where I'm at so far-

<https://codepen.io/muskaurochs/pen/NWNMOYG>

```
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (document.body.scrollTop > 200 || document.documentElement.scrollTop > 200) {
    document.getElementById("header").style.width = "80%";
  } else {
    document.getElementById("header").style.width = "100%";
  }
    if (document.body.scrollTop > 350 || document.documentElement.scrollTop > 350) {
    document.getElementById("header2").style.width = "80%";
  } else {
    document.getElementById("header2").style.width = "100%";
  }
    if (document.body.scrollTop > 600 || document.documentElement.scrollTop > 600) {
    document.getElementById("header3").style.width = "80%";
  } else {
    document.getElementById("header3").style.width = "100%";
  }
}

```