progress bar on scroll

by tomik23

HTML

<div id="progress" class="bar"></div>
    <div class="container">
        <h1>proggres bar test - <span>scroll</span></h1>
        <div class="lipsum">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu commodo orci, sed elementum massa. Nam sit amet elementum
                ipsum, eu laoreet metus. Aenean a ex vel erat aliquam imperdiet eu at justo. Nulla in lobortis tellus. Curabitur
                varius laoreet quam non facilisis. Etiam consequat purus elit, vel euismod ligula faucibus fringilla. Etiam
                cursus dui eros, non egestas nibh congue a. Nullam eu justo neque. Cras rutrum arcu elit. Quisque vestibulum
                et mi vel congue. Curabitur a ultrices ligula. Morbi enim ligula, euismod eu ornare id, pharetra et sapien.
                Sed aliquam, elit vitae aliquet iaculis, leo sapien rutrum ipsum, at fermentum nibh dolor ac risus.
            </p>
            <p>
                Nunc a orci auctor, ornare leo at, convallis neque. Mauris congue, massa ac faucibus aliquam, diam dui porta purus, sed consequat
                eros dolor ac ex. Vivamus augue orci, bibendum nec imperdiet sit amet, fringilla at lacus. Nullam condimentum
                dolor eu dolor consequat, a ullamcorper eros congue. Aliquam varius nec elit et posuere. In rutrum et mi
                a tristique. Praesent at magna a magna vestibulum vulputate. Ut vulputate, leo nec blandit fermentum, urna
                dolor efficitur erat, vitae aliquam risus diam eget libero.
            </p>
            <p>
                Phasellus vel augue quis felis lacinia fermentum. Donec laoreet mauris non orci tincidunt maximus. Curabitur mattis tincidunt
                eros, et pellentesque eros venenatis ut. Mauris eget justo nec leo maximus interdum. Vestibulum aliquet lorem
                commodo, semper enim bibendum, pretium nisi. Donec ultricies, nibh vitae dapibus porttitor, lorem nulla bibendum
               ...

CSS

.container {
    width: 800px;
    margin: 0 auto;
}

.bar {
    position: fixed;
    background: rgb(255, 0, 0);
    height: 10px;
    width: 0;
    top: 0;
}

h1 {
    text-transform: uppercase;
    margin: 20px 0;
}

h1 span {
    color: rgb(60, 177, 6);
}

p {
    margin-bottom: 10px;
}

JavaScript

const ProgressBar = function () {

    window.addEventListener('scroll', () => {
        let ws = window.pageYOffset, 
            wh = window.innerHeight,
            dh = document.body.clientHeight;
        let scrollPercent = (ws / (dh-wh)) * 100;
        const progressBar = document.querySelector('#progress');
        if(ws > 50) {
            progressBar.setAttribute('style','width:'+ scrollPercent + '%');
        } else {
            progressBar.removeAttribute('style');
        }
    });

}();