固定于浏览器中心右侧的社交图标

Question

我正在尝试将我的社交图标定位到浏览器的右侧，以便当浏览器调整大小时，它们始终保持在浏览器右侧。这是一个 JSfiddle，展示了它们目前的行为：http://jsfiddle.net/SHHM8/。

HTML

<div id="fixedsocial">
    <div class="facebookflat"></div>
    <div class="twitterflat"></div> 
</div>

CSS

#fixedsocial {
    top:30%;
    height:200px;
    width:60px;
    position:fixed;
}

.facebookflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
   transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.facebookflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;

}

.twitterflat {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    transition:ease 500ms;
    background-size:50px;
    opacity:1;
}

.twitterflat:hover {
    background:url("http://placehold.it/50x50");
    height:50px;
    width:50px;
    background-size:60px;
    opacity:0.5;
    transition:ease 500ms;
    margin-left:-20px;
    width:70px;
}

我曾试图使用以下代码将名为“fixedsocial”的容器向屏幕右侧浮动：

float:right;

然而，这并没有起到任何作用。

因此，请将图标固定在浏览器的中心右侧。非常感谢您的帮助。

- user3350338

---

请在问题中包含有效的代码，而不仅仅是 jsfiddle 的链接。 - Liam

谢谢你整理这个给我，以后我会保持这样的方式。 - user3350338

Answer 1

只需在您的

中添加right: 0，然后您就完成了。

#fixedsocial {
    top:30%;
    height:200px;
    width:60px;
    position:fixed;
    right: 0;
}

更新的演示链接

- Felix

Answer 2

你需要的是类似这样的东西：

#fixedsocial {
  position: fixed;
  right: 0;
  top: 50%;
}

- Matt

Answer 3

这是正常的。

margin:30%;
height:200px;
width:60px;

您的 #fixedsocial 元素在浏览器中一直跟随窗口顶部，占窗口高度的 30%。

如果您设置了固定的外边距，问题就可以得到解决。

请尝试。

margin-top:150px;
height:200px;
width:60px;

- FabienHuot

Answer 4

你需要的是这样的东西：

.sidebar-wrap{
    position: fixed;    
    width: 60px;
    height:250px;
    top: 50%;
    margin-top: -125px; /* Needs to be half of the height */
}

请查看此文章以获取更多信息：响应式粘性社交侧栏

- Rev Nosky