看到facebook每个页面底部的工具栏了吗？如图：
昨天用js写了一个，代码如下：
1: $(document).ready(function() {
2: fixPosition();
3:
4: $(window).resize(fixPosition).scroll(fixPosition);
5: });
6:
7: function fixPosition() {
8:
9: $('.bottom').css("top", document.body.offsetHeight + getScrollTop() - 200)
10: .css('left', (document.body.offsetWidth - 500) / 2).html(
11: 'document.body.offsetHeight:' + document.body.offsetHeight
12: + '<br/>document.body.scrollTop:' + document.body.scrollTop
13: + '<br/>document.body.clientHeight:' + document.body.clientHeight
14: + '<br/>document.body.scrollHeight:' + document.body.scrollHeight
15: + '<br/>document.documentElement.scrollTop:' + document.documentElement.scrollTop
16: + '<br/>' + new Date().toLocaleTimeString());
17: }
18: function getScrollTop() {
19: var scrollPos = 0;
20: if (typeof window.pageYOffset != 'undefined') {
21: scrollPos = window.pageYOffset;
22: }
23: else if (typeof window.document.compatMode != 'undefined' &&
24: window.document.compatMode != 'BackCompat') {
25: scrollPos = window.document.documentElement.scrollTop;
26: }
27: else if (typeof window.document.body != 'undefined') {
28: scrollPos = window.document.body.scrollTop;
29: }
30: return scrollPos;
31: }
css代码：
1: .bottom
2: {
3: position: absolute;
4: height: 200px;
5: background: #ddd;
6: width: 500px;
7: }
不过在ie和firefox下使用的时候都会闪，而facebook的却一点也不闪，好奇之下用firebug看了看样式，原来如此：
原来用css实现了，代码如下
.bottom
{
bottom: 0;
color: #111111;
font-size: 11px;
height: 25px;
padding: 0;
position: fixed;
right: 0;
width: 100%;
z-index: 99;
}
试了一下，果然不闪了，特记之。。。
posted on 2010-01-20 01:29
becket_zheng 阅读(1080)
评论(0) 编辑 收藏 所属分类:
网页web前端技术 、
C#