I have a layout that includes full width image and below 2 columns with text.
https://codepen.io/Matteokr/pen/rNgedKL
<section class="section">
<div class="container">
<div class="row">
<div class="col-12">
<img src="https://placehold.co/1200x600" alt="" />
</div>
</div>
<div class="row wrapper">
<div class="col-6 text text-left">
<h2>TEXT 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit tempus lectus, eu tincidunt tellus volutpat in.</p>
</div>
<div class="col-6 text text-right">
<h2>TEXT 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porttitor purus sit amet dapibus eleifend. Sed vel erat quis leo vehicula ultrices. Pellentesque augue ipsum, molestie sed quam at, vestibulum viverra nisi. Nunc efficitur lorem sed lacus pellentesque facilisis. Nullam commodo, sapien ultrices dapibus interdum, lorem quam dictum risus, a commodo purus nisl quis mi. Integer vestibulum aliquet porttitor. Vestibulum auctor neque vitae ipsum varius dignissim. Nunc quis augue vel sapien auctor ultricies. Maecenas varius libero iaculis neque placerat, sit amet hendrerit purus condimentum. Aenean fringilla eros ac interdum commodo. Morbi scelerisque lorem ut nisl ornare, mattis efficitur sem aliquam. In hendrerit tempus lectus, eu tincidunt tellus volutpat in.</p>
<p>Aenean ac nunc rutrum, sagittis dui pellentesque, malesuada lorem. Sed sed bibendum lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam eu neque neque. Fusce quis enim interdum, efficitur arcu at, dignissim turpis. Quisque bibendum risus nec tempus congue. Ut at libero ut ipsum venenatis dignissim id non purus. Vestibulum et bibendum dui, a sollicitudin lectus. Morbi mollis auctor risus at sodales.</p>
<p>Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.</p>
<p>Nullam elit velit, consectetur et pretium eget, dapibus in odio. Integer nec dignissim massa. Duis convallis tellus eu molestie ornare. Quisque dapibus ipsum et euismod laoreet. Suspendisse vulputate dui quis lacinia vehicula. Integer ac commodo ligula. Pellentesque at vehicula ligula. Mauris nec luctus nunc, id pharetra mauris. Aenean rhoncus orci quam, sit amet elementum tortor lobortis quis. Ut in scelerisque nisl.</p>
</div>
</div>
</div>
</section>
-
In the beginning I would like to hide text columns, so it is something like an image cover the whole text in the viewport.
-
When you start scrolling the image moves up (like a normal scroll) and then uncovers the “fixed” to the top left column.
Step 1.1
Step 1.2
- When I scroll enough, I have a gap between the image and the left column, I would like to lock the position of the image and when I scroll more, then it will appearing scrolling the right column up.
The right column will be moved up as long as reach it the original position.
Step 2
Step 3
- After reaching the position, then it will start in the normal scroll.
I tried a few methods with sticky, fixed positions, but I stuck with that.
Any help here?
1