html - 位置 : Sticky; not working for an image

Question

我试图让图像具有粘性，但它不起作用。这是我的 HTML 和 CSS。

HTML

<div class="media">
  <img class="sticky" src="mediabuttons.PNG" width="25%" height="25%">
</div>

CSS 用于 div。

.media{
   float: left;
   text-align: right;
   width: 15%;
   margin-top: 65px;
}

CSS 图像。

.sticky{
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}

Answer 1

我根据您的代码创建了一个简化的片段，并且运行良好。
你的问题应该是另一种造型!

看到它工作:

.media {
  float: left;
  height: 2000px;
  background: linear-gradient(to bottom, red, green 50%, blue 100%);
}

.sticky {
  position: sticky;
  top: 0;
}

<div class="media">
  <img class="sticky" src="http://placekitten.com/g/100/100">
</div>