Efekt przewijania strony

Powrót

HTML:

<div class="status"></div>

CSS:

.status{
        height: 10px;
        width: 0%;
        background-color: cornflowerblue;
        transition: .6s linear;
        position: fixed;
        top: 0;
        left: 0;
     }
    body{
        margin: 0;
        height: 400vh;
        background-image: linear-gradient(45deg, red 0%, orange 100%)
    }

JS:

 const bar = document.querySelector(".status");
        const statusBar = () => {
            currentScroll = Math.round(scrollY / (document.documentElement.offsetHeight - window.innerHeight)*100);
            bar.style.width = currentScroll + "%";
        }
            window.addEventListener('scroll',statusBar);    

Dodaj komentarz

Dodaj komentarz

  Subscribe  
Powiadom o