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

Question

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

Navigation

#1 by (2 votes)
#2 by (0 votes)

1

I have 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, it stays with 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 fiddle: link

Following the example: As you can see, in opening the example, we see that we are not completely seeing the div of the rectangle, but there is a moment that scrolling down can see the whole rectangle. At this point, I would like the rectangle to have position:fixed; following the screen.

javascript html css

asked by anonymous 22.12.2016 / 19:53

2 answers

Adding and Removing jQuery Inputs How to split a variable into an array

score 2 · Answer 1

Assuming you do not know the offset (position in the scroll of your element) first we need to figure it out:

//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 every 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 its element, if it has a fixed position, and if not, it will return to position absolute I did not get to test, from a checked one

score 0 · 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 the screen goes down.

@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 at JsFiddle .