I would need to make sure that when the page is scrolled the div ".col-left" is placed in the fixed position (it must start from the top ".ctn-parte-iniziale").
Also, when it gets to the bottom of the footer ".bg-orange" it must stop and it must no longer be in the fixed position.
How can I do?
A thousand thanks!
This is my code:
<div class="ctn-parte-iniziale">...</div>
<div id="main-site">
<div class="bg-white">
<div class="container">
<div class="page_layout page_margin_top clearfix cnt-corsi-gen">
<div class="row">
<div class="col-md-3 col-lg-3 col-xs-12">
<div class="col-left">
...
</div>
</div>
<div class="col-md-9 col-sm-9 col-xs-12">
...
</div>
</div>
</div>
</div>
</div>
</div>
<div class="bg-orange"></div>```
Try adding this to col-left. In 2021 you may not need the webkit line but try it first.
So, in CSS
div.sticky {
position: -webkit-sticky; <!-- Safari/Chrome --->
position: sticky;
top: 0;
}
And then in your HTML
<div class="col-left sticky">