浏览网站的时候经常会看到漂浮工具条,咱们很多项目也有漂浮工具条。
但是做这个效果的时候你会发现,改变窗口大小之后你原本设置好,刚刚好可以停靠在内容边边的工具条就跑到内容里面去了
怎么解决呢?
赶紧来看看新浪微博是怎么实现的!
http://weibo.com
原理
其实原理跟做绝对定位元素水平居中的道理是一样的,使元素居中,然后在向旁边偏移
内页是水平居中的,决定定位的漂浮工具条也是水平居中的,然后向右偏移,使其刚刚好停靠在内容旁边
如何实现呢?
HTML
<a class="W_gotop" id="base_scrollToTop" href="javascript:void(0);" style="visibility: visible;">
<em class="W_ficon ficon_backtop">Ú</em>
</a>
CSS部
.W_gotop { position: fixed; _position: absolute; bottom: 40px; left: 50%; margin-left:500px; display: block; width: 40px; height: 35px; padding-top: 5px; text-align: center; text-decoration: none; cursor: pointer; opacity: 0.6;}
.W_gotop em { display: inline-block; font-size: 20px; width: 26px; height: 30px; line-height: 30px; line-height: 32px\9; overflow: hidden; color: #fff;}
.W_gotop:hover { opacity: 1;}
.W_gotop .W_ficon:hover { color: #fff;}
position: fixed;
使其相对窗口定位
_position: absolute;
兼容IE6
left: 50%; margin-left:500px;
是元素水平居中,为什么是500px? 因为内容的宽度是1000px