How would I achieve a half screen scroll lock effect?

Question

I'm looking to design a site that has a similar feature to this one: http://combo.nyc/projects/chillhouse

I'd like to lock the scrolling on only one half of the page at a time. I've designed two panels .leftPanel and .rightPanel but I'm not sure how to get this effect. I'm assuming there's some way to get this through jquery but through my searching I haven't come up with a good way to do it smoothly and properly.

Would anybody be able to help direct me towards a good method or explain how I can attach this functionality into my site?

Thanks!

Answer 1

Use position: sticky with top: 0 and calculate the heights accordingly. No js required.

 .panelWrap{ width: 100vw; background: #000; color: #fff; } .leftPanel{ height: 100%; width: 50vw; float: left; background: green; } .rightPanel{ height: 100%; width: 50vw; background: blue; float: right; height: } p{ height:100vh; } .is-sticky{ position: sticky; top: 0; background: red; height: 200px; } 

 <div class="panelWrap"> <div class="leftPanel"> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> <div class="is-sticky"> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> </div> <p>Many desktop publishing packages and web page editors </p> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> </div> <div class="rightPanel"> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text. </p> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> <div class="is-sticky"> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. </p> </div><p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> <p>Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like). </p> </div> </div>