ScrollTop()

jQuery

30/06/2017

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

Curtidas 0

Melhor post

Victor Machado

Victor Machado

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
   }
});
GOSTEI 3

Mais Respostas

Dayan Barros

Dayan Barros

30/06/2017

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
GOSTEI 1
Victor Machado

Victor Machado

30/06/2017

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
    });
});
GOSTEI 0
POSTAR