CODEWITHSUNDEEP
htmlcssreactjs
Johannes Klauß
Johannes Klauß

Reputation: 11020

position fixed in child element but sync parents x scroll with child elements left position

I have a div, that is positioned relative and scrolls horizontally.

Inside that div I want to have a fixed positioned element, which scrolls along with the parent div but stays at the top, because that parent div is child of a vertically scrolling div.

I created a codesandbox to illustrate my point: https://codesandbox.io/s/strange-browser-mydzm

enter image description here

So the green div scrolls vertically, so that both the red and the blue divs are scrollable at the same time. The blue div is also scrollable but horizontally, so that the red div stays visible.

Now I want the orange div (where it says RightPane) to scroll horizontally along with the blue div, but when the green div is scrolled vertically, I want the orange div to stay fixed.

Setting the RightPane to positon: fixed without setting a top property helps it to prevent the vertical scrolling, but it also prevents the horizontal scrolling.

Is this possible to achieve with CSS only?

Upvotes: 1

Views: 2218

Answers (1)

Tiago Coelho
Tiago Coelho

Reputation: 5091

I don't think it is possible to do exactly what you want, but I was able to get pretty close by using position:sticky both for the right pane and for the orange title.

check if this could work for you with some additional tweaks maybe:

https://codesandbox.io/s/wonderful-ellis-dyckc

.App {
  position: relative;
  ...
}

.leftPane {
  width: 30%;
  z-index: 1;
  position: sticky;
  left: 0px;
  float: left;
  ...
}

.rightPane {
  height: 100%;
  margin-left: calc(30% + 20px);
  position: relative;
  ...
}

.fixedPane {
  position: sticky;
  ...
}

Upvotes: 2

Related Questions