“固定”位于伪元素之前答案

【问题标题】："Fixed" positioned before pseudo element“固定”位于伪元素之前
【发布时间】：2015-06-12 13:29:18
【问题描述】：

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

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

===更新===

这里有问题。这是新的密码笔：http://codepen.io/kiranm/pen/QbgxZV

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

【问题讨论】：

您是否尝试将.icon::before 中的position:absolute; 更改为position:fixed;？
@EricMartinez 我从没想过！非常感谢
codepen.io/kiranm/pen/QbgxZV 喜欢这样吗？
@EricMartinez 显然这种方法存在问题。你能看看我的更新吗？
我不确定您的问题是什么。如果你想 An icon 成为 fixed 它已经在工作了。您的更新与我们建议您的解决方案相同。

标签： css

【解决方案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 中滚动的值，并将其值添加到窗口顶部，然后我将该结果分配给icon 的top，因此它将是“fixed”到 div。此外，我将icon div 移动为scrollable 的子元素，因此我可以单独操作它。

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

希望对你有帮助。

【讨论】：

谢谢。我很感激
@Eric Martinez 我将相同的应用于水平滚动。但是没用
你能给我一个解决方案吗？我被这个困住了

【解决方案2】：

试试这样：Demo

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

【讨论】：

【解决方案3】：

我无法理解您的要求？固定位置仅适用于相对于窗口屏幕。否则你设置 icon position:relative 然后给 icon::before position absolute.

【讨论】：

但是当你滚动icon时，icon::before也会滚动。我想要icon::before，因为没有更好的词，“固定”到icon 而不是窗口。我希望它有意义