htmlcssstickymockups

CSS Sticky iPhone-Mockup with scrolling content

i need your help. I want to build a iPhone-Mockup with scrolling Content. The Mockup is implement in the middle of a page. When i scroll down and the iPhone is visible and i keep scrolling, the phone must be sticky and i scroll only the content in the phone.

see there, it works; 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>

but the problem is; the content is not on the beginning of the sticky element. I try some much things but nothing works.

Have everyone any ideas?

many thanks
Rick

Solution

  • If your .passageWrapper is height: 70vh, then you can add this to .iphone-mockup-container:

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