How to put a fixed div between header and footer-CodePudding

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>```

CodePudding user response：

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">