CSS Display image in certain scroll position "Y"

Asked

Viewed 257 times

1

Good evening, I have a question in CSS

I am trying to make a parole in css, similar to this below:

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

This conditional performs a certain action when the horizontal width of the page is below 480 pixels, however I am trying to make a conditional in css, which performs a certain action when the position "Y" of the scroll goes somewhere, as for the end of the page, for example

thanks to those who help

In the code below that I did this the example of the text that if decrease the width of the page it gets the background in red, what I am trying to do and leave the text in red background when the scroll of the text is at the end of the page

<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>

javascript html css

1 answer

1


If using jQuery is an option, you can do it as follows using the event .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>

If you want this action to be triggered at a certain number of pixels at the bottom of the page, you can use the code as follows:

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

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.