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

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。

堆栈片段

.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;
}

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