Solution 1 :

Try to use this using template string:

target.style.filter = `blur(${(height - scrollTop) / height}px)`;

Sample:

window.onscroll = function() {
  var target = document.getElementById("text");
  var height = window.innerHeight;
  var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body.parentNode || document.body).scrollTop;
  // Change this if you want it to fade faster
  height = height / 1;
  // target.style.filter = 'blur(' + (height - scrollTop) / height + 'px)';
  target.style.filter = `blur(${(height - scrollTop) / height}px)`;
};
@font-face {
  font-family: Akz;
  src: url("fonts/AkzidenzGrotesk-Regular.otf");
}

* {
  padding: 0;
  margin: 0;
}

#text {
  font-family: Akz;
  font-size: 2em;
  line-height: 1.3em;
  height: 100vh;
  filter: blur(0px);
}

.header {
  height: 100vh;
}

.footer {
  height: 100vh;
}
<div class="header">

</div>

<div id="text">
  <p>
    Litteris quem illum deserunt quid. Quis si iis dolor appellat sed et incurreret graviterque. Expetendis familiaritatem est deserunt, malis possumus admodum, quae philosophari litteris dolore voluptate, quae eiusmod e veniam sunt an se admodum e mandaremus,
    si aliqua ab ipsum do lorem non id dolore litteris, quis relinqueret deserunt quorum cupidatat.
  </p>
</div>

<div class="footer">

</div>

Problem :

I am trying to change the css blur filter. I am able to change it to a single value however i would like to change it dynamically so that as you scroll up more blur is added.

i assume this can be done with a line of code such as

blur((height - scrollTop) / height + px);

I cannot seem to get this to work.

https://codepen.io/tylerrowens/pen/RwPBZGP

By