CODEWITHSUNDEEP
htmlcss
Covy
Covy

Reputation: 81

Make div stick to bottom of its container div after scrolling

I'm trying a div (later: #blue-element) to move up while scrolling down and to let it stop moving up at a certain point, even if I continue to scroll.

I have tried to use:

align-self: flex-end; Element stayed at the top. bottom: 0px; The element stayed at the bottom the whole time, but it couldn't be scrolled anymore. margin-top: auto; It didn't push the element down. margin-bottom: auto; It didn't push the child element down.

HTML

<div id="brown-container">
 <div id="green-element">Some stuff</div>
 <div id="blue-element>Some stuff</div>
</div>

CSS

#brown-container {
 top: 10%
 height: 80%
}
#green-element {
 height: 1000px
}
#blue-element {
 code: that did not work;
}

I have a png example below

enter image description here

The #green-element should scroll normally.

Upvotes: 1

Views: 4824

Answers (1)

Nidhin Joseph
Nidhin Joseph

Reputation: 10227

You can use position: sticky; with the top set using viewport-height

#brown-container {
  top: 10%;
  height: 80%
}

#green-element {
  height: 500px;
  background: green;
}

#blue-element {
  background: blue;
  position: sticky;
  top: 75vh;
}

#other-element {
  height: 500px;
  background: yellow;
}
<div id="brown-container">
  <div id="green-element">Some stuff</div>
  <div id="blue-element">Some stuff</div>
  <div id="other-element">Other stuff</div>
</div>

Upvotes: 4

Related Questions