快捷導(dǎo)航

JQUERY 實(shí)現(xiàn)窗口滾動搜索框停靠效果(類似滾動?？?

更新時(shí)間：2013年03月27日 16:08:12 作者：

由于分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里，處于對用戶體驗(yàn)的考慮，我使用Jquery實(shí)現(xiàn)了一種類似滾動停靠的效果，感興趣的朋友可以參考下哈

當(dāng)頁面需要顯示的內(nèi)容較多時(shí)，我們很多人采用分頁的方法解決。

而有的時(shí)候，分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里，處于對用戶體驗(yàn)的考慮，我使用Jquery實(shí)現(xiàn)了一種類似“滾動?？俊钡男Ч＿@樣當(dāng)我們向下滾動內(nèi)容的時(shí)候，搜索框會“懸掛（停靠）”在窗口頂端。

這樣做的好處是，當(dāng)用戶需要重新篩選內(nèi)容的時(shí)候，不必再次向上滾動，隨時(shí)可以輸入條件進(jìn)行搜索。

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

以下是一些這個(gè)效果的一些代碼:
浮動搜索框HTML代碼：(顯示的搜索框和這個(gè)是一樣的，只不過類不同。)

復(fù)制代碼代碼如下:

 
<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：（顯示的搜索框和這個(gè)樣式要一樣，只不過不要設(shè)置位置固定）

復(fù)制代碼代碼如下:

 
/*下拉框*/ 
.drop 
{ 
width: 175px; 
} 
/*浮動搜索框中的表格*/ 
#flowsearchdiv table 
{ 
background-color: #484343; 
color: White; 
border-top: 2px solid White; 
} 
/*浮動搜索框中*/ 
#flowsearchdiv 
{ 
display:none; 
position:absolute; 
left:217px; 
} 

Jquery代碼:

復(fù)制代碼代碼如下:

 
//實(shí)現(xiàn)窗口滾動，搜索框不滾動 
$(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); 
} 
}); 

}); 