Scrolling of two side by side divs with different heights

1

two divs side by side with different heights. The left one is smaller than the right one. If you scroll down you will reach the bottom of the left one first and its position stay fixed. But then, if you still scroll down you will see the remaining contents of the right div.?does this require any javascript plugin or we can simply do with function? --this question has been asked in 2016 but i am not sure their conversation is still continue, so i am starting here.

2

hello AshwiniD,

position: sticky

demo: http://filamentgroup.github.io/fixed-sticky/demos/demo.html
ref: https://developer.mozilla.org/en-US/docs/Web/CSS/position
polyfill: https://github.com/wilddeer/stickyfill

3

Hello @pseudop ,

Thanks for the reply but divs should be side by side not on top e.g. please check the quora website

4

Make the divs stay side by side with display inline-block or flexbox, use position sticky on the shorter one to keep it visible.

For instance:

<div id="container">
  <div id="left"> </div>
  <div id="right"> </div>
</div>  



#container{
  display:flex;
}

#left{
  background:lime;
  height:110vh;
  width:30vw;
  position: sticky;
  top:0;
}

#right{
  background:darkred;
  height:200vh;
  width:30vw;
}