Scrolling Content CSS Sticky iPhone Mockup

Can someone assist me with building an iPhone Mockup with scrolling Content? I want the Mockup to be positioned in the middle of a web page. Specifically, when I scroll down and the iPhone is visible, I would like it to remain sticky so that only the content within the phone itself scrolls.

If you'd like to see this behaviour in action, check out the following link: 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>

I'm facing a challenge: The content does not align properly at the beginning of the sticky element. I've tried numerous approaches without success. Does anyone have any suggestions or ideas?

Thank you kindly,
Rick

htmlcssstickymockups

Answer №1

In the scenario that your .contentContainer has a height of 50vh, you could include the following code snippet within .phone-mockup-wrapper:

.phone-mockup-wrapper {
    margin-top: -50vh
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Fascinating CSS quandary: does the transparency of a parent element impact the transparency of a child element that is absolutely positioned, but not in relation

Check out this test case: https://jsbin.com/merujogudo/1/edit?html,css,output Should the element with .test class be transparent or not? Note: The current state is as follows: In Chrome and Firefox (latest versions): transparent In IE11: opaque It wou ...

cssstandards

The Bootstrap Jumbotron section stubbornly stays above the footer

I'm currently working on a Bootstrap 3 page and facing an issue where the yellow area does not seamlessly transition into the green footer. Instead, there is a white space between the end of the yellow area and the start of the footer. How can I resol ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

If the background image on a div is not visible, then the alt text of the

Here is my unique HTML code consisting of a single div and an image positioned outside the div. <div runat="server" id="ProductThumbnail" style="width:140px;height:140px;position:relative;background-position:center;background-repeat:no-repeat;"> ...

c#htmlcssasp.netimage

Tips for emphasizing a chosen hyperlink within a jQuery Mobile panel

I am currently working on a jquery mobile page that includes a navigation menu in a sliding panel. While the functionality is good, I am looking to enhance the user experience by highlighting the selected link in the navigation. Typically, I would utilize ...

jquerycssjquery-mobileselecteditem

Creating a custom script for a search field that retrieves information from an XML document

Attempting to create a script that iterates through an XML file, the provided code currently displays alerts but fails to show information when a valid value is entered into the search field. However, upon removing the error checks and keeping the final ...

javascripthtml

Provide spacing on the sides for a background position

Is there a way to evenly space my background image with 10px margins on all sides instead of just the left side? Currently, it's only working on the left side. .login-page { display: flex; flex-direction: column; background: url("../src/As ...

htmlcss

What are some methods to maintain consistent height for each list item in an unordered list on small screens like mobile devices?

While vh works well for larger screen sizes such as laptops, it may not maintain the height of the li on smaller devices like mobiles. Is there a better approach than relying on media queries to achieve responsiveness across different screen sizes? ...

javascriptjqueryhtmlcss

Establishing a connection between an Express server and a MariaDB database

Currently, I am working on creating a simple login webpage without any security measures. The setup includes an OpenSuse server with a mariadb database, an Express server, and an HTML file for the client. Express Server: const mariadb = require('mari ...

htmlnode.jsexpresspostmariadb

What is the best way to position two divs side by side while maintaining their individual padding?

When I remove the padding as shown, the website functions correctly with two div columns next to each other. However, upon adding padding, the #right div shifts downwards. How can I ensure it works as intended with padding included? HTML: Two divs direct ...

htmlcssalignmentcss-float

JavaScript - Insert rows within the tbody element by adding them after the opening tbody tag. The new rows should be

Having trouble adding rows in JavaScript. The code is functioning correctly, but the new rows are appearing after the tbody tag instead of inside it. Here's a snippet of the code: function deleteRow(row) { var i = row.parentNode.parentNode.rowIn ...

javascripthtmlcsstwitter-bootstrap

Seeking ways to ensure my component maximizes available space using Tailwind CSS

I am currently utilizing Tailwind CSS to style a Angular application. The setup is fairly straightforward: app.component.html is responsible for displaying a navigation bar and footer, while the components are shown in the remaining space with an overflow- ...

cssangulartailwind-cssangular-router

Rectify the functionality of collapsing and expanding sections

I am utilizing the bootstrap 4 alpha 6 version in my project. On my page, I have multiple blocks that I would like to expand/collapse by clicking on a main button (with the id of 'expand-collapse'). Additionally, each block has its own individual ...

javascriptjqueryhtmltwitter-bootstraptwitter-bootstrap-4

textarea element enclosed by a div tag

I'm looking to add two side-by-side boxes on my page for comments. One box will display previous comments and should be disabled, while the other allows current users to leave comments. I achieved this by using two separate divs positioned next to eac ...

htmltextarea

Retrieving specific HTML data without the need to download the entire webpage

Is there a way to extract data from an HTML table on a webpage without downloading the entire HTML content? In my Delphi XE2 application, I am using TWebBrowser and TEmbeddedWB to load the webpage and then parse the Table element. However, due to the heav ...

htmldelphibrowserextractindy

Tips for Successfully Passing Personal Parameters Using Html.BeginForm

I am looking to pass some additional parameters from my MVC Form to the Controller. Can anyone provide guidance on how to accomplish this? Specifically, I want to pass parameters for StateName and CityName with values from the form so that I can retrieve t ...

jqueryasp.net-mvchtmlasp.net-mvc-4

Insert a hyperlink button using InnerHtml

I am facing an issue with displaying a list item that contains a tab and a link button: <li runat="server" id="liActivityInvoices"><a href="#tabActivityInvoices">Invoices</a><asp:LinkButton runat="server" ID="btnLoadInvoice" OnClick=" ...

javascriptc#jqueryhtmlasp.net

Determine the number of rows in the Tabulator's table

Can anyone tell me how to retrieve the number of rows in a table created using Tabulator on a website? Is there a method like table.size or table.length that I can use for this purpose? The table has been initialized with the following code: table = new T ...

javascripthtmlcssjsontabulator

Adding a variable to the .append function in HTML code

I am currently working on a way to include the current date and time when a user comments on a post in my forum. While I have successfully managed to upload the text inputted by the user into the comment section, I am now looking to also dynamically insert ...

javascriptjqueryhtml

Can row and container classes be used together on a single element?

While watching a tutorial today where someone was creating a website using Bootstrap 4, I noticed that they applied both 'row' and 'container' as classes for the same div. This goes against Bootstrap documentation, which states that the ...

htmlcssbootstrap-4

Steps for accessing a particular item with *ngfor in Angular 2

I'm struggling to figure out why both elements of my array are displaying simultaneously in my browser instead of separately. Take a look at this screenshot to see what I mean: https://i.stack.imgur.com/0EKSn.png Is there a method to specifically ac ...

htmlarraysangularngfor