ScrollTop()

30/06/2017

0

Gostaria de saber se consigo fazer ações quando uso o scroll, mas queria identificar quando vai para cima e quando vai para baixo.

Alguém sabe como funciona?
Dayan Barros

Dayan Barros

Responder

Post mais votado

10/07/2017

Olá Dayanbarros, somente com o scrollTop() não da para fazer, porque ele só recebe um parâmetro e não possui callback.

Mas isso pode ser feito com a ajuda do animate:
var scrollAtual = $(window).scrollTop();

$('html, body').animate({
   scrollTop: //posição desejada
}, function(){
   var scrollNovo = $(window).scrollTop();
   if(scrollAtual > scrollNovo){
      //cima
   }else{
      //baixo
   }
});

Victor Machado

Victor Machado
Responder

Mais Posts

10/07/2017

Dayan Barros

Fala Hugo,

Então, eu tinha feito assim, no caso eu aplico a classe da animação e fixo o menu no topo, só que eu to com problema de quando eu volto para o topo, ele retira a animação, então ele não faz aquela animação bonita que uso no animation.
$(window).scroll(function(){
		var fixed = $('header'),
		scroll = $(window).scrollTop();
			if (scroll >= 100){
				fixed.addClass('fixed-header');
			} else {
				fixed.removeClass('fixed-header');
			}
	});


Eu to penando para conseguir fazer isso.

Como eu falei antes eu estava até querendo fazer aquele efeito de que quando ele identifica o scroll para baixo, ele sobe o menu e quando para cima, ele aparece o menu (parecido com a barra do navegador no mobile). Mas to com dificuldade.

Abraços
Responder

12/07/2017

Victor Machado

Opa Dayanbarros.

Acho que entendi.

O que você deve fazer é, assim que a página for carregada capturar a posição atual do scroll e guardar em uma variavel, e no evento de scroll guardar a nova posição, e verificar se é maior e menor e no final atualizar a variável inicial com o scroll atual.

$(document).ready(function(){
    var ultimoScroll = $(window).scrollTop(); // posição inicial do scroll
    $(window).scroll(function(){
        var fixed = $("header");
        var novoScroll = $(window).scrollTop(); // posição após o scroll

        if(novoScroll < ultimoScroll ){
            //o scroll foi para cima
        }else{
            //o scroll foi para baixo
        }

        ultimoScroll = novoScroll; // atualizando com a posição do scroll atual
    });
});
Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar