1

Eu estava querendo saber como trocar o CSS de uma página após ela receber um scrolling para fora de seu local padrão.

Um exemplo de um site que utiliza isso é o Deviantart.

Aquele menu de TODAY BROWSEWHAT’S HOTUNDISCOVEREDDAILY DEVIATIONS de repente fica fixado depois que a página sofre um scrolling.

Alguém sabe me dar um exemplo de como reproduzir isso para usar em meus websites?


OBS: Eu infelizmente não sei se isso é CSS ou Javascript, se for possível, alguém pode corrigir a minha pergunta.

2 Respostas 2

4

Podes fazer isso utilizando um if/else juntamente com o scrollTop() do jQuery, como no exemplo deste código abaixo:

// O código abaixo deverá ser implementado dentro de uma tag <script> caso implementada no código HTML
$(document).scroll(function() {
  var y = $(this).scrollTop();
  if (y > 50) {
    $('.randomClass')
      .css({
        'background-color': 'tomato',
        'position': 'fixed'
      });
  } else {
    $('.randomClass')
      .css({
        'background-color': 'burlywood',
        'position': 'inherit'
      });
  }
});
.container {
    height: 900px;
    position:relative;
}
.randomClass {
    height: 30px;
    width: 100%;
    background-color: burlywood;
}
<!-- A Biblioteca jQuery abaixo deve ser implementada dentro do <head> do seu site/aplicação -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="container">
    <div class="randomClass"></div>
</div>

0

Isso é feito via CSS, adiciona o propriedade position: fixed; ao elemento.

1
  • Diego podes completar a resposta com um exemplo?
    – Sergio
    Commented 30/12/2015 às 22:18

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .