JQUERY implements the window scrolling search box docking effect (similar to scrolling docking)_jquery

When a page needs to display a lot of content, many of us use paging to solve the problem.

Sometimes, the paging effect is very annoying. Scroll bars are undoubtedly a simple and efficient way. Here, for the sake of user experience, I used Jquery to achieve an effect similar to "scroll docking". In this way, when we scroll down the content, the search box will "hang (dock)" at the top of the window.

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

The following is my idea to achieve this effect:
First, design a hidden search box. The style and events of this hidden search box are the same as those of the displayed search box.
Then set the location of the hidden search box to "absolute".
Third, use Jquery to determine if the scrolling distance of the scroll bar makes the originally displayed search box invisible, display the hidden search box fixed at the top.

The following is some code for this effect:
Floating search box HTML code: (The displayed search box is the same as this one, but the class is different.)

Copy code The code is as follows:

< table class="flowsearch">

Condition one:




Condition two:



Condition three:




< ;td class="conditionname">

Floating search box page css: (The search box displayed should be the same as this style, except Do not set a fixed position)

Copy code The code is as follows:

/*Drop-down box*/
.drop
{
width: 175px;
}
/*Table in 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 code The code is as follows:

//Realize window scrolling, the search box does not scroll
$(function () {
$(window).scroll(function ( ) {
var top = $(this).scrollTop();
var flowSearch = $("#flowsearchdiv");
if (top - 36 < 0) {
//Float The search box is hidden and fades in.
flowSearch.css("display", "none");
} else {
flowSearch.css("display", "block");
top = top 40;
flowSearch.css("top", top);
}
});

});

Here we basically have The effect comes out. When we scroll down the scroll bar, if the original search box exceeds the visible range of the page, the hidden search box is displayed. From the user's perspective, the search box stops at the top of the page, so the user experience is self-evident.
Rendering: