Div fixed when it reaches the top

Question

Div fixed when it reaches the top

Asked 5 years, 9 months ago

Viewed 103 times

1

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

How to do something like this ?

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

I’m not getting it, look at you.

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

It is appearing this way in Chrome Devtools:

It defines the div with "position:Fixed", when the "scroll" reaches the top of that div

– Marcos Brinner

2018/09/12 at 11:43
1

Read about: position Sticky

– Wallace Maxters

2018/09/12 at 11:43
@Wallacemaxters, yes but remembering that Sticky position is not supported by all browsers yet, so actually mostly old versions like Chrome, if he wants something crossbrowser it would be better to use Fixed position and javascript >> https://caniuse.com/#feat=css-Sticky here is a list of supported browsers[

– Marcos Brinner

2018/09/12 at 11:45
@Marcosbrinner actually just doesn’t work on IE... so I would say that support serves 95% of browsers....

– hugocsl

2018/09/12 at 11:54
Thank you very much, if anyone wants to formulate an answer for me to accept, feel free.

– Renan Rodrigues

2018/09/12 at 12:03
You wrote the CSS in SCSS is that right? You are using Bootstrap?

– hugocsl

2018/09/12 at 14:03
Oops. I’m using materialize.

– Renan Rodrigues

2018/09/12 at 14:34

Show 2 more comments

1 answer

Browser other questions tagged javascript html css

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

by hugocsl • **65,517** points · Answer 1 · 2018-09-12T12:06:50+00:00

I believe that the browser support is not so bad even though it does not work in IE, the option of position:sticky Here you can consult the property support: https://caniuse.com/#feat=css-Sticky

See Example: (I left the comments in css for easy)

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:

Example of code after posing the question asked by the author

(see this example in "Whole page" to see better the result)

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