定位在伪元素之前的“固定”

-1

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

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

=== UPDATE ===

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

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

来源

2015-06-12 Margo Eastham

您是否尝试在'.icon :: before'中更改'position：absolute;'到'position：fixed;'的位置？ –

@EricMartinez我从来没有想到这一点！非常感谢 –

http://codepen.io/kiranm/pen/QbgxZV是这样的吗？ –

好吧，我明白你的问题。由于我们都尝试了展开预览的代码，所以当我们缩小预览时，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

我希望它可以帮助你。

来源

2015-06-12 05:22:03

谢谢。我很感激 –

@Eric Martinez我为水平滚动应用了相同的功能。但没有工作 –

你能给我一个解决方案吗？我坚持这一点 –

尝试这样的：Demo

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

来源

2015-06-12 04:42:01

。你可以看看我的更新。谢谢 –

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

来源

2015-06-12 05:04:14

但是当你滚动'icon'时，'icon :: before'也会滚动。我想'icon :: before'，因为缺少一个更好的单词，所以将其“固定”到'icon'而不是窗口。我希望这是有道理的 –

定位在伪元素之前的“固定”

回答

相关问题