Question

我想让图像在div中向上和向下滚动。使用Chrome时定位粘贴，但不能在IE，Edge或Firefox上使用。

HTML

<section class="container">
    <div class="row">
        <div id="stamp-img" class="col-md-6">
             <img src="">
        </div>
        <div class="col-md-6">
        </div>
    </div>
</section>

CSS

#stamp-img {
    position: sticky;
    top: 35%;

    img {
        margin: 50px 0px;
    }
}

Answer 1

为什么不使用固定？ Sticky具有跨浏览器兼容性问题，如其他答案中所述。

＆＃13;

#stamp-img {
  /* changed to fixed */
  position: fixed;
  top: 35%;
  /* new */
  height: 100px;
  overflow: auto;
  /* end new */
  img {
    margin: 50px 0px;
  }
}

＆＃13;

<section class="container">
  <div class="row">
    <div id="stamp-img" class="col-md-6">
      <img src="https://placehold.it/500x500">
    </div>
    <div class="col-md-6">
    </div>
  </div>
</section>

＆＃13;

Answer 2

“粘性属性是不应在生产代码中使用的实验性API”

=＆GT; https://developer.mozilla.org/en-US/docs/Web/CSS/position

将图像滚动到没有位置的div内容：粘性

2 个答案: