Float div inside another div when scrolling

Asked Aug 13 '20 at 23:23

Active Aug 13 '20 at 23:29

Viewed 418 times

I need to make a div float inside another div and move on scrolling, but I need the floating div to not pop out of a container div

I need the floating div to stay inside the container div

Any idea how to do this?

body {
  height: 800px;
}

#main-container {
  width: 100px;
  height: 300px;
  background-color: black;
  margin-top: 100px;
}

#secondary-container {
  width: 90px;
  height: 30px;
  background-color: red;
  position: fixed;
}

<body>
  <div id="main-container">
    <div id="secondary-container"></div>
  </div>
</body>

asked Aug 13 '20 at 23:23

Alejandro Cortés

position sticky instead – Temani Afif Aug 13 '20 at 23:24
@TemaniAfif the div doesn't move when scrolling the page – Alejandro Cortés Aug 13 '20 at 23:27
you need to specify a top value (or bottom), check the duplicat to understand how sticky works – Temani Afif Aug 13 '20 at 23:28

Float div inside another div when scrolling

0 Answers0