1

Boa noite, estou com uma duvida em CSS

Estou tentando fazer um condicional em css, semelhante a este abaixo:

@media only screen and (max-width: 480px) {}

Este condicional executa uma determinada ação quando a largura horizontal da pagina for abaixo de 480 pixels, porem estou tentando fazer um condicional em css, que execute uma determinada ação quando a posicao "Y" do scroll for para algum lugar, como para o fim da pagina, por exemplo

agradeço a quem ajudar

No codigo abaixo que fiz esta o exemplo do texto que se diminuir a largura da pagina ele fica com o fundo em vermelho, o que estou tentando fazer e deixar o texto de fundo vermelho quando o scroll do texto fica no final da pagina

<html>

  <head>
  </head>

  <body>
    <div id="teste">
    <h1>SE DIMINUIR A LARGURA FICA VERMELHO, POREM QUERIA QUE FICASSE VERMELHO QUANDO O SCROLL FOSSE NO FIM DA PAGINA!</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *</BR> *FIM DA PAGINA, SE CONSEGUIU DEIXAR EM VERMELHO QUANDO O SCROLL CHEGA NO FIM OBRIGADO!!!</h1>

      
    </div>
  </body>

</html>
<style type="text/css">
  
  @media only screen and (max-width: 480px) {
    #teste{
      background-color: red;
  }
  
  
  
</style>

1

1 Resposta 1

1

Se utilizar jQuery é uma opção, podes fazê-lo da seguinte maneira utilizando o evento .scroll():

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height()) {
       $('#teste').css('background-color', 'red');
   } else {
       $('#teste').css('background-color', 'initial');
   }
});
#teste {
    height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div id="teste">
    <h1>SE DIMINUIR A LARGURA FICA VERMELHO, POREM QUERIA QUE FICASSE VERMELHO QUANDO O SCROLL FOSSE NO FIM DA PAGINA!</h1>
</div>

Se pretendes que esta acão seja acionada em um determinado número de pixels do final da página, podes usar o código da seguinte maneira:

$(window).scroll(function() {
   if($(window).scrollTop() + $(window).height() == $(document).height() -100 ) {
       $('#teste').css('background-color', 'red');
   } else {
       $('#teste').css('background-color', 'initial');
   }
});

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 .