CSS粘性iPhone样机，带有滚动内容

问题描述

我需要您的帮助。我想构建一个带有滚动内容的iPhone样机。样机是在页面中间的工具。当我向下滚动并且iPhone可见并且继续滚动时，电话必须是粘性的，并且仅滚动电话中的内容。

看到那里，它起作用了； 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>

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

大家有什么想法吗？

非常感谢
里克

解决方法

如果您的.passageWrapper是height: 70vh，则可以将其添加到.iphone-mockup-container：

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