Question

我最近开始探索sticky定位。我试图让图像一旦到达页面顶部就粘在屏幕顶部。与this example相似。注意：在chrome中执行此操作。

无论如何，实施下面的代码后，它无法正常工作。当您滚动时，它只是停留在该部分顶部的原始位置。我试过不使用css-grid并改变大小，但这也没有用。我觉得我在做一些非常基本的错误。

CSS

.offices-section {
  display: grid;
  grid-template-columns: 40% 60%;

  &__photos {
    height: 300vh;

    &--one {
      position: -webkit-sticky;
      position: sticky;
      top: 0;
    }
}

  &__content{
    height: 300vh;
  }
}

HTML

<section className="offices-section">
  <div className="offices-section__photos">
    <img src={officeOne} className="offices-section__photos--one" alt="office one" />
  </div>
  <div className="offices-section__content"></div>
</section>

注意：我使用React，所以技术上面是JSX。感谢您提前提供任何帮助。

Answer 1

尝试在图片中添加一些margin-top。

Stack Snippet

＆＃13;

.offices-section {
  display: grid;
  grid-template-columns: 40% 60%;
}

.offices-section .photos {
  margin-top: 200px;
  height: 300vh;
}

.offices-section .photos .one {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

.offices-section .content {
  height: 300vh;
}

body {
  margin: 0;
}

＆＃13;

<section class="offices-section">
  <div class="photos">
    <img src=http://via.placeholder.com/350x150 class="one" alt="office one" />
  </div>
  <div class="offices-section__content">
  </div>
</section>

＆＃13;

图像不粘贴使用位置：粘滞

1 个答案: