CSS 粘性 iPhone- 带有滚动内容的模型

Question

我需要你的帮助。我想构建一个带有滚动内容的 iPhone-Mockup。模型在页面中间实现。当我向下滚动并且 iPhone 可见并且我继续滚动时，phone 必须是粘性的并且我只滚动 phone.

中的内容

看到那里，它有效； https://jsfiddle.net/rick7240/z62c7v43/

.iphone-mockup {
            background-color: lightgray;
        }
        .iphone-mockup-container {
            margin-left: auto;
            margin-right: auto;
            height: 100%;
            width: 80%;
            max-width: 400px;
            background-color: purple;
            position: relative;
            z-index: 5;
        }
        .iphone-mockup-phone {
            z-index: 10;
            position: absolute;
            width: 100%;
            height: 100%;
            background-image: url('https://www.donkey.de/wp-content/uploads/2020/08/iphone-11-1.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }
        .iphone-mockup-content {
            z-index: 5;
            width: 100%;
            height: 100%;
        }
        .iphone-mockup-content img {
            width: 100%;
        }
        
        .passageWrapper {
            position: sticky;
            position: -webkit-sticky;
            z-index: 10;
            height: 70vh;
            top: 0px;
            background-image: url('https://www.donkey.de/wp-content/uploads/2020/08/iphone-11-1.png');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
        }

<div class="iphone-mockup">
        <div class=passageWrapper></div>
        
        <div class="iphone-mockup-container">
            <div class="iphone-mockup-content">
                <img src="https://www.donkey.de/wp-content/uploads/2020/07/donkey-agentur-cases-toni-gard-kampagne-true-6.jpg">
                <img src="https://www.donkey.de/wp-content/uploads/2020/07/donkey-agentur-cases-toni-gard-kampagne-true-7.jpg">
                <img src="https://www.donkey.de/wp-content/uploads/2020/07/donkey-agentur-cases-toni-gard-kampagne-true-6.jpg">
                <img src="https://www.donkey.de/wp-content/uploads/2020/07/donkey-agentur-cases-toni-gard-kampagne-true-7.jpg">
                <img src="https://www.donkey.de/wp-content/uploads/2020/07/donkey-agentur-cases-toni-gard-kampagne-true-6.jpg">
                <img src="https://www.donkey.de/wp-content/uploads/2020/07/donkey-agentur-cases-toni-gard-kampagne-true-7.jpg">
            </div>
        </div>
    </div>

但问题是；内容不在粘性元素的开头。我尝试了很多东西，但没有任何效果。

大家有什么想法吗？

非常感谢
瑞克

Answer 1

如果您的 .passageWrapper 是 height: 70vh，那么您可以将此添加到 .iphone-mockup-container:

.iphone-mockup-container {
    margin-top: -70vh
}

CSS 粘性 iPhone- 带有滚动内容的模型

CSS Sticky iPhone-Mockup with scrolling content

html

css

sticky

mockups