Solucionado (ver solução)
Solucionado
(ver solução)
11
respostas

condicional if nunca resulta em verdadeiro

boa tarde, estou tentando praticar o que aprendi sobre javascript, e estou tentando identificar a posição de uma div na tela porém o if que deveria compar a posição do que está sendo exibido na tela com a posição da div nunca dá verdadeiro, mesmo quando o scroll atinge 1500 e a posição do objeto é 1206.

function animeScroll(){


    let scrollDiv = document.querySelector('#div-localizar');
    let windowTop = window.pageYOffset;

    console.log(windowTop, scrollDiv.offsetTop);

    const position = scrollDiv.OffsetTop;

    console.log(windowTop > position);
    if(windowTop < position) {
        console.log("scrollou");
    }else{
        console.log('ainda não');
    }

}

window.addEventListener('scroll', function(){
 animeScroll();
});

não sei o que pode, ser pois usei a função typeof e ela mostrou que ambas variáveis são do tipo number. O que pode ser?

11 respostas

Fala ai Marcos, tudo bem? Acho que o seu if deveria verificar se o windowTop é maior do que o position e não menor.

Isso porque se o scroll passou dele, o mesmo deve ser maior.

Seu código:

if(windowTop < position)

Acho que deveria ser:

if(windowTop > position)

Espero ter ajudado.

Obrigado pela ajuda Matheus mas essa parte eu inverti de propósito pra ver se entrava mas também não funcionou. Isso que me intriga.

Fala Marcos, estranho, era para funcionar.

Consegue compartilhar o projeto comigo? Assim eu consigo simular o problema por aqui e analisá-lo com mais calma.

Pode compartilhar através do Github ou Google Drive (zipado).

Fico no aguardo.

serve no codepen? https://codepen.io/marvinoliveiras/pen/PoZMwWr

Fala ai Marcos, dei uma olhada no projeto, o problema era alguns cálculos que estavam deixando o windowTop sempre com o mesmo valor:

let windowTop = window.pageYOffset + ((window.innerHeight * 5)/4);

Remove os cálculos e deixa apenas:

let windowTop = window.pageYOffset

Outro ponto, seu parágrafo está bem no final da página, o scroll não vai chegar até ele, você precisa adicionar mais conteúdo em baixo para que o scroll passe pelo mesmo.

Espero ter ajudado.

obrigado Matheus, fiz as auterações que você falou mas mesmo assim continua. ta alterado no codepen

solução!

Fala ai Marcos, acho que o problema está no offsetTop, ele tem influência em relação ao elemento pai, mas, a gente quer comparar a posição do banner na página, para isso podemos usar a função getBoundingClientRect e pegar a propriedade y dela.

Algo assim:

if(windowTop > scrollPublicity.getBoundingClientRect().y) {
    // deu certo
}

Espero ter ajudado.

não entendi muito bem como um número que era maior o JS não reconhecia como true uma vez que coloquei um console.log para ir imprimindo a posição dos dois objetos e chega um momento em que está por exemplo: if(1100 > 1050) e continua dando false. Mas dessa forma que você passou deu certo.

Tem algum curso aqui na Alura que aborda propriedades como essa getBoundingClientRect().y e outras de animação e posição de objetos na tela?

Fala Marcos, nos testes que eu fiz no seu exemplo compartilhado, o windowTop nunca era maior que a altura do elemento.

A regra é simples, true entra no if, false vai no else, não tem meio termo, é 0 ou 1.

Tem algum curso aqui na Alura que aborda propriedades como essa getBoundingClientRect().y e outras de animação e posição de objetos na tela?

Não temos, essas são os tipos de coisas que acabamos aprendendo no dia-a-dia conforme necessidade.

Espero ter ajudado.

valeu, obrigado

Magina Marcos, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software