DIV CSS 佈局教程網

可以先體驗效果：http:///keleyi/phtml/jqtexiao/4.htm

關於這個效果的體驗：

請最大化浏覽器以獲得更好體驗。

滾動頁面向下，你會發現標題一和標題三的模塊，在到達頁頂後，就一直顯示在頁面頂部，直到模塊下面的橫線到來，才跟著橫線向上移動。

然後，滾動頁面向上，當標題一和標題三的模塊出現在頁面後，就一直顯示在頁面頂部，直到模塊上的橫線到來後，才跟著橫線向下移動動。

其實標題二也是一樣的，只是因為標題高過左邊內容，所以效果看不到。總結效果就是，讓標題模塊在兩條橫線之間盡可能多的顯示。

這是有實際用途的，比如讓廣告多顯示一會。你覺得還有什麼應用呢？

jQuery Stick‘em 插件，使內容一直置頂浮動著

下面是一些示例標記：

<div class="container">
<div class="row stickem-container">
<div class="content">bla bla bla</div>
<div class="aside stickem">I'm gonna be sticky!</div>
</div>
</div>
插件選項設置和默認的東西

item: ’.stickem’（你想滾動置頂不動的部分）
container: ’.stickem-container’（你想讓置頂部分所在的父容器）
stickClass: ’stickit’（開始置頂時被添加的類）
endStickClass: ’stickit-end’（到達容器盡頭時被添加的類）
offset: 0（頁面上已經有一個固定的水平頭部？設置這個像素值抵消 stick ’em）
start: 0（如果指定元素不在容器的頂部，那麼告訴它從哪裡開始置頂）
由於僅僅是給一些塊增加類，因此你需要如下設置你的CSS部分：

.stickem-container {
position: relative;
}

.stickit {
margin-left: 660px;
position: fixed;
top: 0;
}

.stickit-end {
bottom: 0;
position: absolute;
right: 0;
}
但是，插件真的是靈活可變的，所以你可以隨意改變這些類。

點擊這裡下載

現在您可以滾動本頁，看看左邊是否有一個模塊固定不動呢？

沒錯，本插件就是為了類似的需求而做的。

下面請欣賞噴泉：


然後再欣賞煙花：


煙花，雪花的效果：
JavaScript煙花效果 一
JavaScript煙花效果 二
HTML5煙花特效
多彩雪花從天降


下面是大海孤帆：