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

Question

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

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

我能怎么做？

万分感谢！

这是我的代码：

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