Javascript 在卷轴上固定div和剪辑div

我不知道这是否可行，但我有一个容器分区，其中包含两个其他分区，一个在左侧，一个在右侧

在卷轴上，我希望右边的div变成固定的，从顶部开始为30px（移动设备上为25px）

我可以通过航路点自己实现这一点，但我也需要将div夹在底部。我基本上只需要一条连接水平线的垂直线

我已经做了好几天了——每次我把div切换到fixed，它都会溢出主容器。我尝试使用一个剪辑路径，但它不起作用，并且变得非常混乱，因为主要内容已经在剪辑路径中

我试着用桌子使两个div的高度相同，但这意味着我无法独立控制它们

我尝试了航路点，这样第二个div就固定在滚动条上，偏移量为30px，但我还是无法将其剪辑

这是url-

注意：左框是红色的，只是为了帮助识别第一个div。我想在右边的一个div上修剪黑色的div

这是一个截图

主html

<div class="section-size">
        <div class="large-yellow-container">
                <div class="heading-box">
                    <h2 class="large-h2"> <!-- Actual text -->
                    <?php
                    $value = get_field( "large_h2" );

                    if( $value ) {
                        echo $value;
                    } else {
                        echo 'empty';
                    }
                    ?>
                    </h2>
            </div>
            <div class="vertical-box">
            </div>
    </div>

</div>  

如果有帮助的话，我已经在使用jquery了

.large-yellow-container {
    overflow: hidden;
    position: relative
}

.heading-box {
    width: 70%;
    float: left;
    background-color: red;
}

.vertical-box {
    width: 5px;
    height: 100%;
    position: absolute;
    background-color: black;
    display: inline-block;
}



h2.large-h2  {
    font-size: 141px;
    line-height: 172px;
    font-family: 'Tiempos';
    -webkit-font-smoothing: antialiased;
    margin: 0;
    padding: 90px 200px 90px 0;
}