0

Olá, eu estava pensando em colocar em um projeto meu, um "efeito" de controlar um determinado elemento usando a posição da barra de rolagem, quando o usuário desce pela página. Eu tentei fazer alguns testes mas acabou dando em nada. Acho que deva ser fácil de fazer e não queria usar um plugin para isso.

Resumindo: seria um código que calcular a porcentagem da posição do scroll (quando movimentada para cima ou para baixo) de 20 à 100 e transformava em um valor de 0.0 à 1.0 para aplicar como opacidade em um elemento ou de 0 à 200 para colocar como "marginTop", por exemplo. Obrigado desde então =)

6
  • O que você tentou fazer ? Tem algum código ? Tá usando jQuery ou nem ? Commented 10/09/2015 às 17:41
  • Veja se esse exemplo te ajuda http://jsfiddle.net/tcloninger/e5qad/ Commented 10/09/2015 às 17:41
  • Emir, no seu exemplo, ele da o início da animação em uma determinada posição, mas não controla ela se eu tolar para cima ou para baixo no scroll =p
    – Iago Bruno
    Commented 10/09/2015 às 18:02
  • Certo, mais ai vc vai precisar adequar a lógica. O scrollTop te dará a posição do scroll com relação ao tamanho da tela. A partir dai vc só precisará pegar o tamanho da tela com o window.height. Faz uma regra de três e descobre a %. Lembrando que todas vez que o cara rolar a barra o evento será disparado Commented 10/09/2015 às 18:06
  • Jquery tudo bem, é a base de tudo =D mas não queria usar plugins gigantescos para fazer uma determinada função que tenho certeza que da para fazer com poucas linhas de códigos
    – Iago Bruno
    Commented 10/09/2015 às 18:07

1 Resposta 1

1

Fiz um exemplo simples, segue o código abaixo.

O que fiz foi o seguinte, para calcular a porcentagem da rolagem da página peguei o tamanho do scroll e dividi pela quantidade da página já rolada, depois atribui este valor à opacity da div topo.

window.onload = function() {
  var tp = document.querySelector("#topo");
  var box = document.querySelector("#box");

  var tamanhoScroll = document.body.scrollHeight;

  window.addEventListener("scroll", function() {
    var scrollAtual = document.body.scrollTop;
    var porcentagemScroll = scrollAtual / tamanhoScroll;
    tp.style.opacity = porcentagemScroll;
  });
}
* {
  margin: 0;
  padding: 0;
}
body {
  background: #eee;
}
#topo {
  width: 100%;
  height: 70px;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  background: #fff;
  box-shadow: 3px 3px 10px #999;
}
#box {
  width: 85%;
  height: 5000px;
  background: #fff;
  margin: 0 auto;
  margin-top: 30px;
  margin-bottom: 30px;
  border-radius: 20px;
  box-shadow: 3px 3px 10px #999;
}
<div id="topo"></div>
<div id="box"></div>

1
  • Era bem no estilo que eu queria! =D Sua resposta já ajudou bastante mas e se eu quiser limitar essa animação para funcionar somente entre dois números e não o scroll todo, tipo quando o valor de scrollTop for entre 100 e 300.
    – Iago Bruno
    Commented 12/09/2015 às 6:42

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 .