DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS進階教程 >> 天涯論壇下面固定漂浮特效的做法
天涯論壇下面固定漂浮特效的做法
編輯:CSS進階教程     

網頁制作poluoluo文章簡介:天涯論壇下面固定漂浮特效的做法.

有些東西找起來很麻煩,好用的又不太容易找到,之前看到很多用JS寫的,固定漂浮這種效果拖動時難免會產生抖動

自己對CSS還是蠻有好感的,找來找去找到了天涯,仔細一看是純CSS的,沒有使用JS效果

我覺得它比之前看到的要精簡些不用嵌套多余的DIV

簡單的看一下CSS樣式部分:

body {
background-image:url(text.txt); /* for IE6 */
background-attachment:fixed;
}
#bottomNav {
background-color:#096;
z-index:999;
position:fixed;
bottom:0;
left:0;
width:100%;
_position:absolute; /* for IE6 */
_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); /* for IE6 */
overflow:visible;
}

HTML部分加上這個id為 #bottomNav 的DIV即可:

<div id=”bottomNav”>固定漂浮物在此處O(∩_∩)O~</div>

再看看這些需要注意的地方:

_top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);

看到 _top 大家都知道是為IE6獨家准備的,但是當我只加了上面這句時,IE6下拉動滾動條看到的這個漂浮物是抖動的-_-|||
解決方法我們為IE6添加這樣一條語句:

background-image:url(text.txt);

注意這裡的 text.txt 其實不需要有這個txt文檔,txt的文件名叫什麼看自己喜好喽,如此一來我們就解決了IE6下的緩動問題。

PS:你可能會對 text.txt 和 expression 感到郁悶,也有人使用多嵌套一層 DIV 做了個假滾動條實現了這個方法,當然這種方法在也會相應的改動下默認屬性,可這種寫法和之前網站融合起來很郁悶,要添加一個DIV(因為我之前沒有在最外層寫DIV.wrap)。
相比之下我更喜歡天涯這樣的純CSS寫法

固定漂浮選擇這樣寫的理由:

純CSS的寫法,避免了多嵌套一層外部DIV制作假滾動條造成的網站重構麻煩的尴尬場面。
同時不會有JS漂浮所產生的抖動效果。

可能更好的我沒有發現,如果你有更多更好的方法別忘了告訴我哈~

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved