How to exchange the position (css) attribute of a div

Question

I have a div of id = 'retangulo' with position:absolute;. When the page loads, this vertical rectangle only appears in half. I want when the person rolls the site at a time when the whole rectangle appears, he gets the position:fixed; always following the movement of the screen.

header{
  width:100%;
  height:150px;
  background-color:#423142;
}

div#retangulo{
  width:50px;
  height:400px;
  background-color: green;
  position:absolute;
  top:220px;
  left:100px;
}

footer{
  height:200px;
  width:100%;
  background-color:red;
  position:absolute;
  top: 1500px;
}

<header></header>
<div id="retangulo">
  {texto exemplo....}
</div>
<footer></footer>

Exemplifying with the fiddle: https://jsfiddle.net/pjegfkrz/

Following the example: As you can notice, when opening the example, we see that we are not seeing completely the div of the rectangle, but there is a moment when rolling down you can see the whole rectangle. At that point, I’d like the rectangle to have the position:fixed; accompanying the screen.

Answer 1

Assuming you don’t know the offset (position in the scroll of your element) we first need to discover it:

//detecta scroll na janela
$(window).on("scroll", function() {

    var retangulo = $('#retangulo');
    //obtem a posição da div com relação ao scroll
    var posicao = retangulo.offset();

    //define se o scroll atual é maior ou igual a posição da div
    if($(window).scrollTop() >= posicao.top) {
      $("#retangulo").css({"position" : "fixed"});
    }else{
       $("#retangulo").css({"position" : "absolute"});
    }
  });

Basically each time the user scrolls on the page this function will repeat itself and check if the height of the current scroll is greater or equal to that of its element, if it is it will have position Fixed, and if it is not it will return to position Absolute. I didn’t get to test it, check it out

Answer 2

You can use media query for this. When it reaches the width of 700px and height of 600px, the position will change from absolute to fixed. You can set the other properties on it as well. Everything you set within that scope will be applied when decreasing the screen.

@media screen and (max-width:700px), screen and (max-height: 600px) {
  div#retangulo{
    width:50px;
    height:200px;
    background-color: green;
    position:fixed;
    top:100px;
    left:100px;
  }
}

header{
  width:100%;
  height:150px;
  background-color:#423142;
}

div#retangulo{
  width:50px;
  height:400px;
  background-color: green;
  position:absolute;
  top:220px;
  left:100px;
}

footer{
  height:200px;
  width:100%;
  background-color:red;
  position:absolute;
  top: 1500px;
}

@media screen and (max-width:700px), screen and (max-height: 600px) {
  div#retangulo{
    width:50px;
    height:200px;
    background-color: green;
    position:fixed;
    top:100px;
    left:100px;
  }
}

<header></header>
<div id="retangulo">
  {texto exemplo....}
</div>
<footer></footer>

See working on Jsfiddle.