Question

如何使icon::before伪元素不滚动。我希望它有一个“固定”的位置;不是相对于窗口，而是div.scrollable.icon

以下是我正在谈论的演示：http://codepen.io/anon/pen/VLWdEm

=== UPDATE ===

这里有一个问题。这是新的codepen：http://codepen.io/kiranm/pen/QbgxZV

如何icon::before相对于div.scrollable.icon“固定”？

Answer 1

好的，我了解你的问题。由于我们都尝试扩展预览的代码，我们没有看到当缩小预览时div相对于窗口是固定的。

所以我想出了这个，虽然我不能用CSS做，但我不得不添加一些jQuery并修改你的HTML结构。

HTML

<div class="scrollable">
   <div class="icon"></div>
   text
</div>

CSS

.scrollable {
  border: 1px solid tomato;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: absolute;
}

.icon {
   position: relative;
}

.icon::before {
    content: 'An icon';
    background-color: yellow;
    padding: 2em;
}

和jQuery

 var $ = jQuery || $;
 $(document).ready(function() {

   $('.scrollable').on('scroll', function() {
     var top = $('.scrollable').scrollTop() + $('.scrollable').offset().top;
     $('.icon').css({'top': top + 'px'});
   });
  });

正如你所看到我添加了另一个CSS规则，所以我可以使用jQuery操作它，并且使用jQuery我在容器div中获取了滚动的值，然后我将它的值添加到窗口的顶部，我将该结果分配给top的{{1}}，以便它将是＆＃34; icon＆＃34;到了div。另外，我将fixed div移动为icon的孩子，以便我可以单独操作它。

这里是笔http://codepen.io/anon/pen/QbgxzV

我希望它可以帮到你。

Answer 2

请尝试以下操作： Demo

.icon::before {
  content: 'An icon';
  background-color: yellow;
  padding: 2em;
  position: fixed; / * changed position absolute to fixed */
}

Answer 3

我无法理解你的要求？固定位置仅适用于相对于窗口屏幕。否则你设置图标位置：相对然后给位置绝对前的icon ::

“固定”位于伪元素之前

3 个答案: