如何解决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
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。