Javascript 保留网页中div过多的部分，已修复

我有一个网页，其中有太多的div。我想保持网页的一部分固定，即使它是向下滚动

问题

我尝试了许多组合。但问题是由于div太多，我无法“剪切”网页中包含div的部分，我可以将类分配给该div，并且具有

位置：固定的
。任何帮助都将非常感谢

我的实际HTML代码（我正在使用django，因此其中有许多django/jinja变量，请忽略它们）

{%block content%}
我的网页

汽油区：A，年份：2018

1区
2区
3区
{%ifequal request.session.step 4%}
第4期
{%endifequal%}
T1
T2
T3
T4
T1
T2
T3
T4
T1
T2
T3
T4
{%ifequal request.session.step 4%}
T1
T2
T3
T4
{%endifequal%}


{%block content_controls%}
{%endblock%}

我想要什么

我基本上希望网页直到
标签保持不变。我使用的是Gridster，它有
元素形式的小部件，因此这些小部件将被置于
之下

这样的
元素太多，所以当用户向下滚动
时，上面的内容应该是固定的

（重点是了解网页的外观）
在fiddle中，我期望直到表行具有值T1、T2、T3、T4。。。。该网页应保持在fiddle中，前5个div没有结束标记。生产代码是一样的吗？你能在添加结束标记时更新它吗？你能看一下这个吗？我做了一些修改
{% block content %}

    <div class="content-wrapper">
        <div class="row">
          <div class="col-md-12 grid-margin stretch-card">
            <div class="card">
              <div class="card-body">
                <h4 class="card-title">My Webpage</h4>
                <p class="card-description" style="color:black;">
                  Zone for Gasoline:A, Year :2018
                </p>
                <div class="row">
                    <div class="col-md-12">
                        <div class="btn-group btn-block mb-4" aria-label="Brand placement algorithm steps">
                    <div class="col md-4">
                    <a href="/app/step-1/"> <button type="button" class="btn btn-block btn-outline-secondary"> Step 1 </button> </a>
                    </div>

                <div class="col md-4">
                    <a href="/app/step-2/"> <button type="button"  class="btn btn-block btn-outline-secondary" > Step 2  </button> </a>
                </div>

                <div class="col md-4">
                    <a href="/app/step-3/"> <button type="button" class="btn btn-block btn-primary"> Step 3 </button></a>
                </div>
                        </div>
                    </div>
                </div>

                <div id="capture-this">
                    <div class="gridster">
                        <table border = "1" class=".table-responsive">
                            <tr>
                                <th colspan="4"  style="background-color:#05345c;">Zone 1</th>
                                <th colspan="4"  style="background-color:#05345c;">Zone 2</th>
                                <th colspan="4"  style="background-color:#05345c;">Zone 3</th>
                                {% ifequal request.session.step 4 %}    
                                <th colspan="4"  style="background-color:#05345c;">Period 4</th>
                                {% endifequal %}
                            </tr>
                            <tr>
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                {% ifequal request.session.step 4 %}    
                                <td width="400" align="center" style="background-color:#0085ca">T1</td>
                                <td width="400" align="center" style="background-color:#0085ca">T2</td>
                                <td width="400" align="center" style="background-color:#0085ca">T3</td>
                                <td width="400" align="center" style="background-color:#0085ca">T4</td>
                                {% endifequal %}
                            </tr>
                        </table>
                    <!---I want webpage till here to remain fixed -->
                        <ul>

                        </ul>
                    </div>
                </div>



                {% block content_controls %}
                {% endblock %}
              </div>
            </div>
          </div>
        </div>
    </div>