Как поместить фиксированный div между верхним и нижним колонтитулами

#javascript #html #jquery #css-position #fixed

Вопрос:

Мне нужно было бы убедиться, что при прокрутке страницы div «.col-left» находится в фиксированном положении (он должен начинаться сверху «.ctn-parte-iniziale»).

Кроме того, когда он доберется до нижней части нижнего колонтитула «.bg-оранжевый», он должен остановиться и больше не должен находиться в фиксированном положении.

Как я могу это сделать?

Тысяча благодарностей!

Это мой код:

 lt;div class="ctn-parte-iniziale"gt;...lt;/divgt;  lt;div id="main-site"gt;  lt;div class="bg-white"gt;  lt;div class="container"gt;  lt;div class="page_layout page_margin_top clearfix cnt-corsi-gen"gt;  lt;div class="row"gt;  lt;div class="col-md-3 col-lg-3 col-xs-12"gt;  lt;div class="col-left"gt;  ...  lt;/divgt;  lt;/divgt;  lt;div class="col-md-9 col-sm-9 col-xs-12"gt;  ...  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt;  lt;/divgt; lt;/divgt;  lt;div class="bg-orange"gt;lt;/divgt;```  

Ответ №1:

Попробуйте добавить это в col-left . В 2021 году вам может не понадобиться webkit линия, но сначала попробуйте ее.

Итак, в CSS

 div.sticky {  position: -webkit-sticky; lt;!-- Safari/Chrome ---gt;  position: sticky;  top: 0; }  

А затем в вашем HTML

 lt;div class="col-left sticky"gt;