當頁面需要顯示的內容較多時，我們很多人采用分頁的方法解決。
而有的時候，分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這裡，處於對用戶體驗的考慮，我使用Jquery實現瞭一種類似“滾動停靠”的效果。這樣當我們向下滾動內容的時候，搜索框會“懸掛（停靠）”在窗口頂端。
這樣做的好處是，當用戶需要重新篩選內容的時候，不必再次向上滾動，隨時可以輸入條件進行搜索。
以下是我實現這個效果的思路：
首先，設計一個隱藏的搜索框。這個隱藏的搜索框的樣式、事件和已經顯示出來的搜索框是一樣的。
然後設置隱藏搜索框的位置“absolute”。
第三，使用Jquery判斷，如果滾動條的滾動距離使得原來顯示的搜索框不可見時，顯示固定在頂部的隱藏搜索框。
以下是一些這個效果的一些代碼:
浮動搜索框HTML代碼：(顯示的搜索框和這個是一樣的，隻不過類不同。)
[html]
<p id ="flowsearchp">
<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>
</p>
<p id ="flowsearchp">
<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>
</p>
浮動搜索框頁面css：（顯示的搜索框和這個樣式要一樣，隻不過不要設置位置固定）
[css]
/*下拉框*/
.drop
{
width: 175px;
}
/*浮動搜索框中的表格*/
#flowsearchp table
{
background-color: #484343;
color: White;
border-top: 2px solid White;
}
/*浮動搜索框中*/
#flowsearchp
{
display:none;
position:absolute;
left:217px;
}
/*下拉框*/
.drop
{
width: 175px;
}
/*浮動搜索框中的表格*/
#flowsearchp table
{
background-color: #484343;
color: White;
border-top: 2px solid White;
}
/*浮動搜索框中*/
#flowsearchp
{
display:none;
position:absolute;
left:217px;
}Jquery代碼:
[javascript]
//實現窗口滾動，搜索框不滾動
$(function () {
$(window).scroll(function () {
var top = $(this).scrollTop();
var flowSearch = $("#flowsearchp");
if (top – 36 < 0) {
//浮動搜索框隱藏，淡入效果
flowSearch.css("display", "none");
} else {
flowSearch.css("display", "block");
top = top + 40;
flowSearch.css("top", top);
}
});
});
//實現窗口滾動，搜索框不滾動
$(function () {
$(window).scroll(function () {
var top = $(this).scrollTop();
var flowSearch = $("#flowsearchp");
if (top – 36 < 0) {
//浮動搜索框隱藏，淡入效果
flowSearch.css("display", "none");
} else {
flowSearch.css("display", "block");
top = top + 40;
flowSearch.css("top", top);
}
});
});
到這裡基本上我們的效果就出來瞭。當我們向下滾動滾動條時，如果原來的搜索框超出頁面可視范圍，隱藏搜索框顯示。從用戶的角度看，就是搜索框停在瞭頁面頂部，這樣用戶的體驗就不言而喻啦。