JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)

当页面需要显示的内容较多时，我们很多人采用分页的方法解决。

而有的时候，分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里，处于对用户体验的考虑，我使用Jquery实现了一种类似“滚动停靠”的效果。这样当我们向下滚动内容的时候，搜索框会“悬挂（停靠）”在窗口顶端。

这样做的好处是，当用户需要重新筛选内容的时候，不必再次向上滚动，随时可以输入条件进行搜索。

以下是我实现这个效果的思路：
首先，设计一个隐藏的搜索框。这个隐藏的搜索框的样式、事件和已经显示出来的搜索框是一样的。
然后设置隐藏搜索框的位置“absolute”。
第三，使用Jquery判断，如果滚动条的滚动距离使得原来显示的搜索框不可见时，显示固定在顶部的隐藏搜索框。

以下是一些这个效果的一些代码:
浮动搜索框HTML代码：(显示的搜索框和这个是一样的，只不过类不同。)
代码如下:

<br><div id ="flowsearchdiv"> <br><table class="flowsearch"> <br><tr> <br><td class="conditionname">条件一：</td> <br><td class="condition"> <br><asp:DropDownList ID="dropFlowCondition1" CssClass="drop" runat="server"> <br></asp:DropDownList> <br></td> <br><td class="conditionname">条件二：</td> <br><td class="condition"> <br><asp:DropDownList ID="droFlowCondition2" CssClass="drop" runat="server"> <br></asp:DropDownList> <br></td> <br><td class="conditionname">条件三：</td> <br><td class="condition"> <br><asp:DropDownList ID="dropFlowCondition3" CssClass="drop" runat="server"> <br></asp:DropDownList> <br></td> <br><td class="conditionname"> <br><asp:Button ID="flowbtnsearch" CssClass="btn" runat="server" Text="查询" /> <br></td> <br></tr> <br></table> <br></div> <br> <br>浮动搜索框页面css：（显示的搜索框和这个样式要一样，只不过不要设置位置固定） <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>/*下拉框*/ <br>.drop <br>{ <br>width: 175px; <br>} <br>/*浮动搜索框中的表格*/ <br>#flowsearchdiv table <br>{ <br>background-color: #484343; <br>color: White; <br>border-top: 2px solid White; <br>} <br>/*浮动搜索框中*/ <br>#flowsearchdiv <br>{ <br>display:none; <br>position:absolute; <br>left:217px; <br>} <br> <br>Jquery代码: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br>//实现窗口滚动，搜索框不滚动 <br>$(function () { <br>$(window).scroll(function () { <br>var top = $(this).scrollTop(); <br>var flowSearch = $("#flowsearchdiv"); <br>if (top - 36 < 0) { <br>//浮动搜索框隐藏，淡入效果 <br>flowSearch.css("display", "none"); <br>} else { <br>flowSearch.css("display", "block"); <br>top = top + 40; <br>flowSearch.css("top", top); <br>} <br>}); <br><br>}); <br> <br>到这里基本上我们的效果就出来了。当我们向下滚动滚动条时，如果原来的搜索框超出页面可视范围，隐藏搜索框显示。从用户的角度看，就是搜索框停在了页面顶部，这样用户的体验就不言而喻啦。 <br>效果图： <br><img src="https://img.gxlcms.com//Uploads-s/new/2019-09-17-201917/2013327160148419.gif"></li><li>            </li><li>                                </li></ol></pre></li></ol></pre>