如何使最后一个元素将粘性元素向上推

Question

这是我的HTML

img {
    max-width: 100%;
}
.container {
    min-height: 100vh;
    max-width: 600px;
    margin: auto;
}
.mysection {
    background: rgb(207, 233, 255);
}
.mytext {
    padding: 50px 0;
    position: sticky;
    top: 0;
    background: aquamarine;
}
.myimages img {
    margin-top: 50px;
}

<div class="wrapper">
    <section>
        <div class="container">
            Lorem ipsum dolor si....
        </div>
    </section>
    <section class="mysection" >
        <div class="container">
            <div class="mytext">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. ...
            </div>
            <div class="myimages">
                <img src="https://picsum.photos/id/715/900/550" >
                <img src="https://picsum.photos/id/249/900/550" >
                <img src="https://picsum.photos/id/124/900/550" >
                <img src="https://picsum.photos/id/75/900/550" >
                <img src="https://picsum.photos/id/823/900/550" >
            </div>
        </div>
    </section>
    <section >
        <div class="container">
        Lorem ipsum dolor sit,...
    </div>
    </section>
</div>

我已将 mytext div 设置为置顶。我想要 myimages div 中的最后一张图片将置顶文本部分推到上面。

我该怎么做？纯 css 解决方案会很棒，但我也可以使用 js 或 jquery 解决方案。

检查这个 jsfiddle link - https://jsfiddle.net/wdu8jc2z/1/ 将很容易可视化

Answer 1

你可以这样做

img {
    max-width: 100%;
}
.container {
    min-height: 100vh;
    max-width: 600px;
    margin: auto;
}
.container2 {
    display:in-block;
    padding-bottom: 30px;
    max-width: 100%;
    margin: auto;
    text-align:center;
    background: rgb(207, 233, 255);
}
.mysection {
    background: rgb(207, 233, 255);
}
.mytext {
    padding: 50px 0px;
    position: sticky;
    top: 0;
    background: aquamarine;
}
.myimages img {
    margin-top: 50px;
}
.myimages2 img {
    max-width: 600px;
    margin-top: 0px;
}

<div class="wrapper">
    <section>
        <div class="container">
            Lorem ipsum dolor si....
        </div>
    </section>
    <section class="mysection" >
        <div class="container">
            <div class="mytext">
                Lorem ipsum dolor sit amet consectetur adipisicing elit. ...
            </div>
            <div class="myimages">
                <img src="https://picsum.photos/id/715/900/550" >
                <img src="https://picsum.photos/id/249/900/550" >
                <img src="https://picsum.photos/id/124/900/550" >
                <img src="https://picsum.photos/id/75/900/550" style="padding-bottom:40px;">
            </div>
        </div>
    </section>
    <section >
     <div class="container2">
        <div class="myimages2">
          <img src="https://picsum.photos/id/823/900/550" >
        </div>
     </div>   
        <div class="container">
        Lorem ipsum dolor sit,...
    </div>
    </section>
</div>

如何使最后一个元素将粘性元素向上推

How to make the last element push the sticky element up

css

sticky