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

Question

我需要确保当页面滚动时 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>```

Answer 1

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

因此，在 CSS

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

然后在你的 HTML

<div class="col-left sticky">

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

How to put a fixed div between header and footer

html

javascript

jquery

fixed

css-position