DIV CSS 佈局教程網

當頁面需要顯示的內容較多時，我們很多人采用分頁的方法解決。

而有的時候，分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這裡，處於對用戶體驗的考慮，我使用Jquery實現了一種類似“滾動停靠”的效果。這樣當我們向下滾動內容的時候，搜索框會“懸掛（停靠）”在窗口頂端。

這樣做的好處是，當用戶需要重新篩選內容的時候，不必再次向上滾動，隨時可以輸入條件進行搜索。

以下是我實現這個效果的思路：
首先，設計一個隱藏的搜索框。這個隱藏的搜索框的樣式、事件和已經顯示出來的搜索框是一樣的。
然後設置隱藏搜索框的位置“absolute”。
第三，使用Jquery判斷，如果滾動條的滾動距離使得原來顯示的搜索框不可見時，顯示固定在頂部的隱藏搜索框。

以下是一些這個效果的一些代碼:
浮動搜索框HTML代碼：(顯示的搜索框和這個是一樣的，只不過類不同。)
. 代碼如下:
<div id ="flowsearchdiv">
<table class="flowsearch">
<tr>
<td class="conditionname">條件一：</td>
<td class="condition">
<asp:DropDownList ID="dropFlowCondition1" CssClass="drop" runat="server">
</asp:DropDownList>
</td>
<td class="conditionname">條件二：</td>
<td class="condition">
<asp:DropDownList ID="droFlowCondition2" CssClass="drop" runat="server">
</asp:DropDownList>
</td>
<td class="conditionname">條件三：</td>
<td class="condition">
<asp:DropDownList ID="dropFlowCondition3" CssClass="drop" runat="server">
</asp:DropDownList>
</td>
<td class="conditionname">
<asp:Button ID="flowbtnsearch" CssClass="btn" runat="server" Text="查詢" />
</td>
</tr>
</table>
</div>

浮動搜索框頁面css：（顯示的搜索框和這個樣式要一樣，只不過不要設置位置固定）
. 代碼如下:
/*下拉框*/
.drop
{
width: 175px;
}
/*浮動搜索框中的表格*/
#flowsearchdiv table
{
background-color: #484343;
color: White;
border-top: 2px solid White;
}
/*浮動搜索框中*/
#flowsearchdiv
{
display:none;
position:absolute;
left:217px;
}

Jquery代碼:
. 代碼如下:
//實現窗口滾動，搜索框不滾動
$(function () {
$(window).scroll(function () {
var top = $(this).scrollTop();
var flowSearch = $("#flowsearchdiv");
if (top - 36 < 0) {
//浮動搜索框隱藏，淡入效果
flowSearch.css("display", "none");
} else {
flowSearch.css("display", "block");
top = top + 40;
flowSearch.css("top", top);
}
});

});

到這裡基本上我們的效果就出來了。當我們向下滾動滾動條時，如果原來的搜索框超出頁面可視范圍，隱藏搜索框顯示。從用戶的角度看，就是搜索框停在了頁面頂部，這樣用戶的體驗就不言而喻啦。
效果圖：