I am trying to convert this small `script` to a pure `vanilla JS`. 

The plain JS values are not calculated correctly.

What do I need to get to calculate the same value as in the jQuery version?

Pleaset scroll down in the jQuery fiddle to see what l mean.

```
$(document).scroll(function() {
    var progressBar = $('progress'),
        docHeight = $(this).height(),
        winHeight = $(window).height(),
        max = docHeight - winHeight,
        value = $(window).scrollTop();
    progressBar.attr('max', max);
    progressBar.attr('value', value);
});

```

[**DEMO jQuery**](https://jsfiddle.net/pd3dtvxn/1/)

And below, my pure JS which doesn't work :

```
var progressBar = function() {
    var myBar = document.querySelector('progress'),
        docHeight = document.clientHeight,
        winHeight = window.clientHeight,
        max = docHeight - winHeight,
        value = window.scrollY;
    myBar.setAttribute('data-max', myBar.getAttribute('max'));
    myBar.setAttribute('max', max);
    myBar.setAttribute('data-value', myBar.getAttribute('value'));
    myBar.setAttribute('value', value);
};
document.addEventListener('scroll', progressBar);
window.addEventListener('resize', progressBar);

```

[**My attempt in vanilla**](https://jsfiddle.net/pd3dtvxn/)

Thank you!!