欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQUERY 實(shí)現(xiàn)窗口滾動(dòng)搜索框停靠效果(類(lèi)似滾動(dòng)停靠)

 更新時(shí)間：2013年03月27日 16:08:12   作者：  
由于分頁(yè)的效果卻又是非常令人厭惡的。滾動(dòng)條無(wú)疑是一種簡(jiǎn)單而又高效的一種方式。而這里，處于對(duì)用戶(hù)體驗(yàn)的考慮，我使用Jquery實(shí)現(xiàn)了一種類(lèi)似滾動(dòng)停靠的效果，感興趣的朋友可以參考下哈
當(dāng)頁(yè)面需要顯示的內(nèi)容較多時(shí)，我們很多人采用分頁(yè)的方法解決。

而有的時(shí)候，分頁(yè)的效果卻又是非常令人厭惡的。滾動(dòng)條無(wú)疑是一種簡(jiǎn)單而又高效的一種方式。而這里，處于對(duì)用戶(hù)體驗(yàn)的考慮，我使用Jquery實(shí)現(xiàn)了一種類(lèi)似“滾動(dòng)?？俊钡男Ч?。這樣當(dāng)我們向下滾動(dòng)內(nèi)容的時(shí)候，搜索框會(huì)“懸掛（?？浚痹诖翱陧敹?。

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

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

以下是一些這個(gè)效果的一些代碼:
浮動(dòng)搜索框HTML代碼：(顯示的搜索框和這個(gè)是一樣的，只不過(guò)類(lèi)不同。)
復(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="查詢(xún)" />
</td>
</tr>
</table>
</div>

浮動(dòng)搜索框頁(yè)面css：（顯示的搜索框和這個(gè)樣式要一樣，只不過(guò)不要設(shè)置位置固定）
復(fù)制代碼 代碼如下:

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

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

//實(shí)現(xiàn)窗口滾動(dòng)，搜索框不滾動(dòng)
$(function () {
$(window).scroll(function () {
var top = $(this).scrollTop();
var flowSearch = $("#flowsearchdiv");
if (top - 36 < 0) {
//浮動(dòng)搜索框隱藏，淡入效果
flowSearch.css("display", "none");
} else {
flowSearch.css("display", "block");
top = top + 40;
flowSearch.css("top", top);
}
});

});

到這里基本上我們的效果就出來(lái)了。當(dāng)我們向下滾動(dòng)滾動(dòng)條時(shí)，如果原來(lái)的搜索框超出頁(yè)面可視范圍，隱藏搜索框顯示。從用戶(hù)的角度看，就是搜索框停在了頁(yè)面頂部，這樣用戶(hù)的體驗(yàn)就不言而喻啦。
效果圖：

相關(guān)文章

最新評(píng)論