停止最后一个元素上的固定块

Question

我有以下代码段（作为完整页面打开代码段）：

#container_1{
    margin-top: 50px;
    margin-bottom: 150px;
}

.block1{
    background: green;
    margin-bottom: 15px;
    color: #FFFFFF;
}

#moving_block{
    z-index: 0;
    background-color: purple;
    color: #FFFFFF;
}

#footer{
  background-color: gray;
  height: 5000px;
  color: #FFFFFF;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<div id="container_1" class="container">
    <div class="col-md-5 col-md-offset-1">
        <div class="row block1">
            <div class="col-md-8">
                <p>TEXT</p>
            </div>
        </div>
        <div class="row block1">
            <div class="col-md-8">
                <p>TEXT</p>
            </div>
        </div>
        <div class="row block1">
            <div class="col-md-8">
                <p>TEXT</p>
            </div>
        </div>
        <div class="row block1">
            <div class="col-md-8">
                <p>TEXT</p>
            </div>
        </div>
        <div class="row block1">
            <div class="col-md-8">
                <p>TEXT</p>
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <div id="moving_block" class="col-md-3 affix">
            <div class="row">
                <p>TEXT</p>
            </div>
         </div>
    </div>
</div>

<section id="footer">
MY FOOTER
</section>

当他遇到最后一个绿色方块时，我想停止紫色方块。

Answer 1

这可以使用position:sticky完成。

我考虑使用引导程序V4，因为它具有内置的粘性功能。我还简化了代码，仅保留了与演示相关的代码：

#container_1 {
  margin-top: 50px;
  margin-bottom: 150px;
}

.block1 {
  background: green;
  color: #FFFFFF;
}
.block1:not(:last-child) {
  margin-bottom: 15px;
}

#moving_block {
  background-color: purple;
  color: #FFFFFF;
}

#footer {
  background-color: gray;
  height: 5000px;
  color: #FFFFFF;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet">
<div id="container_1" class="container">
  <div class="row">
    <div class="col-5 col-offset-1">
      <div class="row block1">
          <p>TEXT</p>
      </div>
      <div class="row block1">
          <p>TEXT</p>
      </div>
      <div class="row block1">
          <p>TEXT</p>
      </div>
      <div class="row block1">
          <p>TEXT</p>
      </div>
      <div class="row block1">
          <p>TEXT</p>
      </div>
    </div>
    <div class="col-6">
      <div id="moving_block" class="overflow-auto position-sticky sticky-top">
          <p>TEXT</p>
      </div>
    </div>
  </div>
</div>

<section id="footer">
  MY FOOTER
</section>