JQUERY实现了窗口滚动搜索框的对接效果(类似于滚动对接)

当页面需要显示更多的内容时，我们很多人都会使用分页的方法来解决。有时候，分页的效果很恶心。滚动条无疑是一种简单高效的方式。在这里，考虑到用户体验，我使用Jquery实现了一个类似“滚动对接”的效果。这样，当我们向下滚动时，搜索框会“挂(停靠)”在窗口顶部。这样做的好处是，当用户需要重新过滤内容时，不用再向上滚动，可以随时输入条件进行搜索。下面是我达到这个效果的想法：第一，设计一个隐藏的搜索框。此隐藏搜索框的样式和事件与显示的搜索框的样式和事件相同。然后将位置设置为“绝对”以隐藏搜索框。第三，通过Jquery判断，如果滚动条的滚动距离使得原本显示的搜索框不可见，则显示固定在顶部的隐藏搜索框。下面是一些这种效果的代码：浮动搜索框HTML代码：(显示的搜索框和这个一样，但是类别不同。)复制的代码如下： div ID=' flow search iv ' table Class=' flow search ' tr TD Class=' Condition Name '条件1:/TD TD Class=' Condition ' asp3360 DropDownList ID=' DropFlowcondition 1 ' CSS Class=' drop ' runat=' server '/asp3360 DropDownList/Td Class=' Condition Name '条件2:/TD TD TD TD Class=' Condition ' ASP : DropDownList ID=' drop Condition 2 ' CSS Class=' TD class=' condition name ' ASP : button id=' flow btnsearch ' CSS class=' BTN ' runat=' server ' text=' query '/TD/tr/table/Page div浮动搜索框CSS:(显示的搜索框应与此样式相同，只是位置不应固定)复制的代码如下： /*下拉框*/。 drop { width: 175px}/*浮动搜索框中的表格*/# flowserviceiv表格{ background-color : # 484343；颜色：白色；边框-top: 2px纯白色；}/*在浮动搜索框*/# flowserviceiv { display : none；位置：绝对；left:217px} Jquery代码：复制代码如下： //实现窗口滚动，搜索框不滚动$ (function () {$ (window))。scroll(function(){ vartop=$(this))。scroll top()；var FlowSearch=$(' # FlowSearchdiv ')；If (top-36 0) {//浮动搜索框隐藏并淡入效果flowSearch.css('display '，' none ')；} else { flowSearch.css('display '，' block ')；top=前40名；flowSearch.css('top '，top)；} });});这里，基本上，我们的效果出来了。当我们向下滚动滚动条时，如果原始搜索框超出了页面的可见范围，请隐藏搜索框显示。从用户的角度来看，搜索框停在页面顶部，所以用户的体验不言而喻。效果图：