JQUERY implements the window scrolling search box dock effect (similar to rolling Dock)

When many pages need to be displayed, many of us use paging.

Sometimes, the paging effect is very annoying. Scroll bars are a simple and efficient method. Here, considering the user experience, I use Jquery to achieve a effect similar to "rolling dock. In this way, when we scroll down the content, the search box will be "suspended (docked)" at the top of the window.

The advantage of this is that when you need to filter the content again, you do not have to scroll up again and can enter conditions to search at any time.

The following are my ideas for achieving this effect::
First, design a hidden search box. The Style and events of the hidden search box are the same as those of the displayed search box.
Then, hide the "absolute" position in the search box ".
Third, use Jquery to determine whether the hidden search box is fixed on the top if the scroll distance of the scroll bar makes the original search box invisible.

Below are some codes for this effect.:
Floating search box HTML code: (the displayed search box is the same, but the class is different .)Copy codeThe Code is as follows: <div id = "flowsearchdiv">
<Table class = "flowsearch">
<Tr>
<Td class = "conditionname"> condition 1: </td>
<Td class = "condition">
<Asp: DropDownList ID = "dropFlowCondition1" CssClass = "drop" runat = "server">
</Asp: DropDownList>
</Td>
<Td class = "conditionname"> condition 2: </td>
<Td class = "condition">
<Asp: DropDownList ID = "droFlowCondition2" CssClass = "drop" runat = "server">
</Asp: DropDownList>
</Td>
<Td class = "conditionname"> Condition 3: </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 = "query"/>
</Td>
</Tr>
</Table>
</Div>

Floating search box page css: (the displayed search box must be the same as this style, but do not set a fixed position)Copy codeThe Code is as follows:/* drop-down box */
. Drop
{
Width: 175px;
}
/* Table in the floating search box */
# Flowsearchdiv table
{
Background-color: #484343;
Color: White;
Border-top: 2px solid White;
}
/* Floating search box */
# Flowsearchdiv
{
Display: none;
Position: absolute;
Left: 217px;
}

Jquery code:Copy codeThe Code is as follows: // implement window scrolling without scrolling the search box
$ (Function (){
$ (Window). scroll (function (){
Var top = $ (this). scrollTop ();
Var flowSearch = $ ("# flowsearchdiv ");
If (top-36 <0 ){
// Hide the floating search box
FlowSearch.css ("display", "none ");
} Else {
FlowSearch.css ("display", "block ");
Top = top + 40;
FlowSearch.css ("top", top );
}
});

});

Basically, our results have come out. When we scroll down the scroll bar, if the original search box is beyond the visible range of the page, hide the search box. From the user's perspective, the search box is parked at the top of the page, so that the user experience is self-evident.
: