When the page needs to display more content, many of us use pagination method to solve.
And sometimes, the effect of pagination is very disgusting. The scroll bar is undoubtedly a simple and efficient way. And here, in view of the user experience, I used jquery to achieve a similar "scrolling docking" effect. So when we scroll down the content, the search box "hangs" at the top of the window.
The advantage of doing this is that when the user needs to filter the content again, you don't have to scroll up again, you can always enter a condition to search.
Here are my ideas for achieving this effect：
First, design a hidden search box. The style of the hidden search box, the event, and the search box that has been displayed are the same.
Then set the location of the hidden search box "absolute".
Third, use jquery to determine if the scroll bar's scrolling distance makes the previously displayed search box invisible, display the hidden search box fixed at the top.
Here are some of the code for this effect:
Floating search Box HTML code: (The Search box displayed is the same as this one, except that the classes are different.) )
Copy Code code as follows:
<div id = "Flowsearchdiv" >
<table class= "Flowsearch" >
<tr>
<TD class= "ConditionName" > Conditions one:</td>
<TD class= "Condition" >
<asp:dropdownlist id= "DropFlowCondition1" cssclass= "Drop" runat= "Server" >
</asp:DropDownList>
</td>
<TD class= "ConditionName" > Condition two:</td>
<TD class= "Condition" >
<asp:dropdownlist id= "DroFlowCondition2" cssclass= "Drop" runat= "Server" >
</asp:DropDownList>
</td>
<TD class= "ConditionName" > Conditions three:</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: (Display the search box and this style to be the same, but do not set position fixed)
Copy Code code as follows:
/* Dropdown Box * *
. Drop
{
width:175px;
}
/* The form in the Floating search box * *
#flowsearchdiv table
{
Background-color: #484343;
Color:white;
border-top:2px solid white;
}
* * In the floating search box * *
#flowsearchdiv
{
Display:none;
Position:absolute;
left:217px;
}
jquery Code:
Copy Code code as follows:
Implement window scrolling, search box does not scroll
$ (function () {
$ (window). Scroll (function () {
var top = $ (this). ScrollTop ();
var Flowsearch = $ ("#flowsearchdiv");
if (top-36 < 0) {
Floating search box hide, fade in effect
FLOWSEARCH.CSS ("Display", "none");
} else {
FLOWSEARCH.CSS ("Display", "block");
top = top + 40;
Flowsearch.css ("Top", top);
}
});
});
Here basically our effect comes out. When we scroll down the scroll bar, the hidden search box is displayed if the original search box is outside the viewable range of the page. From the user's point of view, is the search box stopped at the top of the page, so the user experience is self-evident.
Effect Chart:
