提问人：Khan Shahan 提问时间：12/28/2022 更新时间：12/28/2022 访问量：33
使元素具有粘性，然后可滚动？
Make an element sticky and then scrollable?
问：
我在页面上有两个 GridItem，它们都有 1fr 1fr，第一个有七个图像，第二个 griditem 有文本，当我向下滚动时，我想使第二个 griditem 粘性，所以当第一个 griditem 图像完成时，然后在滚动时移动两个。
作为参考，此站点在顶部有示例：https://theoodie.co.uk/collections/teen-adult/products/grey-oodie
我已经写下了 HTML 和 CSS，但不知道如何应用这种效果？
答：
0赞
ninadepina
12/28/2022
#1
你可以很容易地让孩子变得粘稠，而他们的兄弟姐妹会滚动。确保它们具有相同的父级，并确保父级大于视口高度，以便粘性同级有时间坚持。
我希望这能有所帮助：
* {
margin: 0;
padding: 0;
}
body {
padding: 2em;
}
.container,
.imgContainer {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 2em;
}
.container {
margin-bottom: 100vh;
}
.imgContainer img:first-of-type {
grid-column-start: 1;
grid-column-end: -1;
}
img {
width: 100%;
height: fit-content;
object-fit: cover;
}
.textContainer {
position: sticky;
top: 0;
display: flex;
flex-direction: column;
background-color: pink;
height: fit-content;
} <div class="container">
<div class="imgContainer">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
<img src="https://images.unsplash.com/photo-1481349518771-20055b2a7b24?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8M3x8cmFuZG9tfGVufDB8fDB8fA%3D%3D&w=1000&q=80" alt="">
</div>
<div class="textContainer">
<h1>position: sticky; </h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac tincidunt odio. Donec odio nibh, consequat a nunc eu, ullamcorper vestibulum justo. Cras rutrum bibendum enim. Cras eget justo nulla. Quisque pulvinar eros eleifend risus facilisis laoreet at sit amet eros. Phasellus vehicula ex eget libero luctus, a semper quam suscipit. Vestibulum in risus fringilla, gravida ipsum a, rhoncus nisl. Sed pellentesque at lacus hendrerit blandit. Aliquam elementum odio sit amet elementum finibus.</p>
</div>
</div>
评论