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?
Alguém sabe como funciona?
Dayan Barros
Curtir tópico
+ 0
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:
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
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.
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
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.
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
Clique aqui para fazer login e interagir na Comunidade :)