css 使一个元素粘滞，然后滚动？

eit6fx6z 于 2022-12-30 发布在其他

关注(0)|答案(1)|浏览(170)

我有两个griditems在页面上都有1fr 1fr，第一个有七个图像和第二个griditem有文本，当我向下滚动我想使第二个griditem粘性，所以当第一个griditem图像完成后，然后移动两个滚动。
作为参考，该网站顶部有一个示例：https://theoodie.co.uk/collections/teen-adult/products/grey-oodie
我已经写下了html和css，但不能想出如何应用该效果？

css

来源：https://stackoverflow.com/questions/74941464/make-an-element-sticky-and-then-scrollable

1条答案

按热度按时间

t5fffqht1#

你可以很容易地使一个子对象在其兄弟对象滚动时具有粘性。确保它们具有相同的父对象，并确保父对象大于视口高度，以便粘性兄弟对象有时间进行粘贴。
我希望这能有所帮助：

* {
    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>

赞(0）回复(0）举报 2022-12-30

我来回答

css 使一个元素粘滞，然后滚动？

1条答案

相关问题

热门标签

最新问答