看到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 閱讀(1095)
評論(0) 編輯 收藏 所屬分類:
網頁web前端技術 、
C#