post #2258

Fazer div aparecer/desaparecer ao rolar (scroll) a pagina com JS e CSS

Publicado em: 02/01/2023 / Atualizado em: 02/01/2023

Aprenda a fazer uma seção (div) aparecer ou desaparecer ao rolar (scroll) a pagina, apenas com javascript e CSS com este código simples.

HTML de exemplo:

<div class="secao-qualquer">
  <p>Olá mundo!</p>
</div>

JavaScript:

$(function() {
    var header = jQuery(".secao-qualquer");
    jQuery(window).scroll(function() {
        var scroll = jQuery(window).scrollTop();

        if (scroll >= 700) { // Altura da pagina em pixels
            header.removeClass('display-none');
        } else {
            header.addClass("display-none");
        }
    });
});

CSS:

.display-none {
	display: none !important;
}

OBS: Este código usa jQuery para funcionar.

Publicações recomendadas:

Link Direto

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link direto abaixo. Basta copiar.

bruno.art.br/?p=2258

ID de Referência: 2258

Sugira uma publicação

Envie uma mensagem e sugira um publicação sobre um assunto que tenha dificuldades de resolver.

Clique aqui e entre em contato

MENU