post

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

Publicado em: 02/01/2023

Categorias: BlogCSSJavaScriptJS

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.


Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/2258

ID de Referência: 2258

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários