css - 这是在我的网站上放置滚动社交栏的好方法吗？

Question

我正在编写我自己的滚动社交栏，但我很确定我正在使用的方法。正如您在上图中看到的，我在较窄的内容 div 中放置了一个较宽的灰色 div。然后我设置了 grey's one a css 使其 z-index 小于内容 z-index。一旦我滚动网站，它就可以正常工作并跟随内容，但我的问题是 - 这是放置这样一个栏的好方法吗？也许有更简单的解决方案，并且浏览器兼容性更好，不是吗？

真诚的， 马特

Answer 1

您可以将 DIV 的大小缩小到更少的空间，然后将其设置为 postion:fixed 以便它随滚动移动。

Fiddle

HTML

<div id='div1' align='center'>
    <span id='grey'>Like</span><br>Tweet<br><span id='grey'>Share</span>
</div>
<div id='div2' align='center'>Content</div>

CSS

#div1 {
    position:fixed;
    top:30px;
    left:5px;
    background:yellow;
    height:60px;
    width:50px;
    border:4px ridge black;
}
#div2 {
    height:800px;
    width:200px;
    background:orange;
    margin-left:60px;
}
#grey {
    background:grey;
}