Div set when it arrives at the top

Question

Div set when it arrives at the top

Navigation

#1 by (4 votes)

1

Well, I do not even know how to ask and name what this functionality is, something similar to the Airbnb site when the right side card reaches the top of the page it stays fixed by moving only the contents of the middle of the page.

How do you do something like this?

Until I found this answer @ 6153074 but this is disappearing in my case I can not give fadeIn or fadeOut

I'm not getting it, look how it is.

.banner-full {
    img {
        width: 99vw !important;
        height: 70vh !important;
    }

    .cardContact {
        height: 500px;
        background-color: red;
        width: 400px;

        position: sticky;
        top: 900px; /* distancia que o elemento vai parar antes do topo */
    }
}

<div class="banner-full">
    <img src="https://picsum.photos/1585/552/?random"alt="">
    <div class="row">
        <div class="col m6" style="height: 3000px">

        </div>
        <div class="col m6">
            <div class="cardContact">

            </div>
        </div>
    </div>
</div>

Appearing this way in Chrome DevTools:

javascript html css

asked by anonymous 12.09.2018 / 13:38

1 answer

Migration from ATP to STP Date formatting is changing its parameters

score 4 · Accepted Answer

I believe that browser support is not so bad, although it does not work in IE, the position:sticky option here you can check the support of the property: link

See the example: (I left the comments in the css to make it easier)

body{
  height: 1000px;
}
.box {
    position: sticky;
    top: 50px; /* distancia que o elemento vai parar antes do topo */
    width: 50px;
    height: 50px;
    background: #f00;
    margin-top: 160px; /* distancia que o elemento vai estar do topo antes da rolagem */
    margin-right: 50px;
    margin-left: auto;
}

<div class="box"></div>

EDIT:

Code sample after the author's question is updated

(see this example under "All Page" for a better view)

.banner-full img {
  width: 99vw !important;
  height: 70vh !important;
}

.cardContact {
  height: 500px;
  background-color: red;
  width: 400px;

  position: sticky;
  top: 60px;
  /* distancia que o elemento vai parar antes do topo */
}

<div class="banner-full">
  <img src="https://picsum.photos/1585/552/?random"alt="">

  <div class="row" style="">
    <div class="col m6" style="height: 1000px">
    </div>
    <div class="col m6">
      <div class="cardContact">
      </div>
    </div>
    <div class="col m6" style="height: 500px">
    </div>
  </div>

  <div class="cardContact" style="height: 100px; background:blue;">
    <div class="">
      gdfgfdgfd
      </div>
  </div>

  <div class="row" style="">
    <div class="col m6" style="height: 1000px">
    </div>
    <div class="col m6">
      <div class="cardContact">
      </div>
    </div>
    <div class="col m6" style="height: 1500px">
    </div>
  </div>

</div>