JQUERY 實現視窗滾動搜尋方塊停靠效果

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

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

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

        以下是我實現這個效果的思路：

        首先，設計一個隱藏的搜尋方塊。這個隱藏的搜尋方塊的樣式、事件和已經顯示出來的搜尋方塊是一樣的。

        然後設定隱藏搜尋方塊的位置“absolute”。

        第三，使用Jquery判斷，如果捲軸的滾動距離使得原來顯示的搜尋方塊不可見時，顯示固定在頂部的隱藏搜尋方塊。

        以下是一些這個效果的一些代碼:

浮動搜尋方塊HTML代碼：(顯示的搜尋方塊和這個是一樣的，只不過類不同。)

[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> 

<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：（顯示的搜尋方塊和這個樣式要一樣，只不過不要設定位置固定）

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

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

[javascript] 
//實現視窗滾動，搜尋方塊不滾動  
$(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); 
        } 
    }); 
 
}); 

//實現視窗滾動，搜尋方塊不滾動
$(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);
        }
    });

});
        到這裡基本上我們的效果就出來了。當我們向下滾動捲軸時，如果原來的搜尋方塊超出頁面可視範圍，隱藏搜尋方塊顯示。從使用者的角度看，就是搜尋方塊停在了頁面頂部，這樣使用者的體驗就不言而喻啦。