Sticky Div inside HorizontalScrollView

Question

Im building a website based on a Horizontal Scroll View, this is made by an move interaction and a sticky section. Inside this sticky section i want to put an sticky div,then, when you scroll horizontaly, one div remains sticky meanwhile you scroll horizontally.

There is an example: https://studiochevojon.com/

In this website you can horizontal scroll and have a sticky div in determinate moment.

There is my webflow project: https://preview.webflow.com/preview/designfeelings?utm_medium=preview_link&utm_source=dashboard&utm_content=designfeelings&preview=1bd0bbb81feac58ef0d75e3ee82d61d0&mode=preview

Can someone explain me how this works? I try all horizontal scroll tutorials but i dont know how to make this works.

Thank you all.

Answer 1

to be sticky a div needs the style: position: sticky;. Then it needs a broder where ti actually should stick to (top, bottom, left and/or right) and the distance (%, vw/vh, px...). Like in this example

body {
  margin: 0;
  padding: 0;
}

#wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 500vw;
  display: flex;
  background-color: red;
}

.page {
  width: 100vw;
  padding: 5px;
}

#one {
  background-color: yellow;
}

#two {
  background-color: green;
}

#three {
  background-color: grey;
}

#sticky {
  display: flex;
  position: sticky;
  left: 0;
  width: 100vh;
  background-color: blue;
  padding: 5px;
}

<div id="wrapper">
  <div class="page" id="one">I'm page 1</div>
  <div class="page" id="two">I'm page 2</div>
  <div id="sticky">I'm the Sticky Box</div>
  <div class="page" id="three">I'm page 3</div>
</div>