Question

我不知道这是否可行，但是我有一个容器div，其中包含另外两个div，一个在左边，另一个在右边。

在滚动时，我希望右侧的div固定，距离顶部30像素（移动设备为25像素）

我可以自己通过航路点实现这一点，但我也需要将div裁剪到底部。我基本上只需要一条垂直线和一条水平线。

我已经待了好几天了-每次将div切换为固定模式时，它都会溢出主容器。我尝试使用剪切路径，但由于主要内容已经在剪切路径中，因此它无法正常工作并引起混乱。

我尝试使用表格将2个div设置为相同的高度，但这意味着我无法独立控制它们。

我尝试了航路点，以便将第二个div固定在滚动轴上，偏移量为30px，但再次无法对其进行裁剪。

这是网址-https://www.sheree-new.shereewalker.com/

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

这是屏幕截图

https://imgur.com/6MsQf2a

主要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>

CSS

.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;
}

如果有帮助，我已经在使用jquery。

修复div并在滚动上裁剪div

0 个答案: