CSS Display image in certain "Y" position of scroll

Question

CSS Display image in certain "Y" position of scroll

Navigation

#1 by (1 votes)

1

Good evening, I have a question in CSS

I'm trying to do a conditional 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 executes a certain action when the "Y" position of the scroll is somewhere, such as the end of the page, for example

Thank you to anyone who helps

In the code below I did this example of the text that if it decreases the width of the page it gets the background in red, which I am trying to do and leave the text in the background red when the text scroll is at the bottom 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

asked by anonymous 03.10.2016 / 04:13

1 answer

Error: Can not read property 'style' of null Concurrent.futures and Class object

score 1 · Accepted Answer

If you use jQuery is an option, you can do it as follows using .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><divid="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');
   }
});