JQUERY 實現(xiàn)窗口滾動搜索框?？啃Ч?類似滾動?？?
更新時間：2013年03月27日 16:08:12 作者：
由于分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里，處于對用戶體驗的考慮，我使用Jquery實現(xiàn)了一種類似滾動?？康男Ч?，感興趣的朋友可以參考下哈
當頁面需要顯示的內(nèi)容較多時，我們很多人采用分頁的方法解決。
而有的時候，分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里，處于對用戶體驗的考慮，我使用Jquery實現(xiàn)了一種類似“滾動停靠”的效果。這樣當我們向下滾動內(nèi)容的時候，搜索框會“懸掛（?？浚痹诖翱陧敹恕?
這樣做的好處是，當用戶需要重新篩選內(nèi)容的時候，不必再次向上滾動，隨時可以輸入條件進行搜索。
以下是我實現(xiàn)這個效果的思路：
首先，設計一個隱藏的搜索框。這個隱藏的搜索框的樣式、事件和已經(jīng)顯示出來的搜索框是一樣的。
然后設置隱藏搜索框的位置“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代碼:
//實現(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);
}
});
});
到這里基本上我們的效果就出來了。當我們向下滾動滾動條時，如果原來的搜索框超出頁面可視范圍，隱藏搜索框顯示。從用戶的角度看，就是搜索框停在了頁面頂部，這樣用戶的體驗就不言而喻啦。
效果圖：
而有的時候，分頁的效果卻又是非常令人厭惡的。滾動條無疑是一種簡單而又高效的一種方式。而這里，處于對用戶體驗的考慮，我使用Jquery實現(xiàn)了一種類似“滾動停靠”的效果。這樣當我們向下滾動內(nèi)容的時候，搜索框會“懸掛（?？浚痹诖翱陧敹恕?
這樣做的好處是，當用戶需要重新篩選內(nèi)容的時候，不必再次向上滾動，隨時可以輸入條件進行搜索。
以下是我實現(xiàn)這個效果的思路：
首先，設計一個隱藏的搜索框。這個隱藏的搜索框的樣式、事件和已經(jīng)顯示出來的搜索框是一樣的。
然后設置隱藏搜索框的位置“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代碼:
復制代碼 代碼如下:
//實現(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);
}
});
});
到這里基本上我們的效果就出來了。當我們向下滾動滾動條時，如果原來的搜索框超出頁面可視范圍，隱藏搜索框顯示。從用戶的角度看，就是搜索框停在了頁面頂部，這樣用戶的體驗就不言而喻啦。
效果圖：
相關文章
這篇文章主要介紹了jquery實現(xiàn)垂直無限輪播的方法,結合實例形式分析了jQuery無限輪播相關界面布局、樣式與頁面元素動態(tài)操作實現(xiàn)技巧,需要的朋友可以參考下2019-07-07
這篇文章主要為大家詳細介紹了基于jQuery實現(xiàn)滾動切換效果,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
jq stop()和:is(:animated)的用法及區(qū)別(詳解)
下面小編就為大家?guī)硪黄猨q stop()和:is(:animated)的用法及區(qū)別(詳解)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-02-02
這篇文章主要介紹了Jquery使用css方法改變樣式的方法,實例分析了jQuery中css方法操作樣式的技巧,需要的朋友可以參考下2015-05-05
jquery中dom操作和事件的實例學習 下拉框應用實現(xiàn)代碼，需要的朋友可以參考下。2011-12-12
jQuery選擇器源碼解讀（八）：addCombinator函數(shù)
這篇文章主要介紹了jQuery選擇器源碼解讀（八）：addCombinator函數(shù),本文用詳細的注釋解讀了addCombinator函數(shù)的實現(xiàn)源碼,需要的朋友可以參考下2015-03-03
閑來無事做的一個Jquery實現(xiàn)仿騰訊微博發(fā)表廣播的特效，功能和樣子實現(xiàn)了，由于樣式是渣渣，所以小伙伴們想直接用的話，還得自己美化下2014-11-11
在使用jQuery開發(fā)的時候，可能還會使用到其他的JS庫，比如Prototype，但多庫共存時可能會發(fā)生沖突，下面這篇文章主要給大家介紹了關于jQuery庫沖突的完美解決辦法，需要的朋友可以參考借鑒，下面來一起看看吧。2017-05-05
瀑布流就是像瀑布一樣的網(wǎng)站——豐富的網(wǎng)站內(nèi)容，特別是絢美的圖片會讓你流連忘返。你在瀏覽網(wǎng)站的時候只需要輕輕滑動一下鼠標滾輪，一切的美妙的圖片精彩便可呈現(xiàn)在你面前。瀑布流網(wǎng)站是新興的一種網(wǎng)站模式——她的典型代表是pinterest、美麗說、蘑菇街這類型的網(wǎng)站。2016-01-01
基于jQuery實現(xiàn)圖片推拉門動畫效果的兩種方法
本文給大家分享兩種方法實現(xiàn)''推拉門''動畫效果也可以稱作是手風琴效果，具體實現(xiàn)方法大家通過本文一起學習吧2017-08-08