如何在页眉和页脚之间放置一个固定的 div答案

【问题标题】：How to put a fixed div between header and footer如何在页眉和页脚之间放置一个固定的 div
【发布时间】：2022-01-06 07:30:09
【问题描述】：

我需要确保当页面滚动时，div“.col-left”被放置在固定位置（它必须从顶部“.ctn-parte-iniziale”开始）。

此外，当它到达页脚“.bg-orange”的底部时，它必须停止并且不再处于固定位置。

我该怎么办？

万分感谢！

这是我的代码：

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

【问题讨论】：

标签： javascript html jquery css-position fixed

【解决方案1】：

尝试将此添加到col-left。 2021 年您可能不需要webkit 行，但请先尝试。

所以，在 CSS 中

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

然后在你的 HTML 中

<div class="col-left sticky">

【讨论】：