2

Olá!

Gostaria de saber, se alguém já fez ou viu em algum site, uma barra horizontal na parte superior do site, exemplo a barra de carregamento do youtube, porém ela aumenta e chega a 100% quando é rolado até o final da página, conforme vai rolando o scroll para baixo, ela vai aumentando e, se rolar o scroll para cima ela irá diminuir. Isto com Javascript.

1 Resposta 1

1

Aqui tem um exemplo feito com JS puro. Acho que é exatamente o que vc precisa. E está bem fácil de customizar etc.

window.onscroll = function() {myFunction()};

function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("progress-bar").style.width = scrolled + "%";
}
body { margin: 0; }

#progress-container {
  position: fixed;
  top: 0;
  z-index: 1;
  width: 100%;
}

#progress-bar-container {
  width: 100%;
  height: 8px
}

#progress-bar {
  height: 8px;
  background-image: -webkit-linear-gradient(90deg, #a258ff, #43b6bd);
  background-image: linear-gradient(90deg, #a258ff, #43b6bd);
  width: 0%;
}

.content {
  height: 10000px;
}
<div id="progress-container">
    <div id="progress-bar-container">
        <div id="progress-bar"></div>
    </div> 
</div>

<div class="content"></div>

Fonte: https://codepen.io/randydaniel/pen/KoKqvg

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .