如果滚动条的滚动距离使得原来显示的搜索框不可见时【www.602.net】

如果滚动条的滚动距离使得原来显示的搜索框不可见时【www.602.net】。当页面要求体现的内容很多时,我们比超级多人采取分页的方式消除。
而一些时候,分页的职能却又是那么些令人不喜欢的。滚动条无疑是一种轻巧而又快捷的一种格局。而这里,处于对客商体验的伪造,笔者利用Jquery完毕了一种恍若“滚动停靠”的效果与利益。那样当大家向下滚动内容的时候,搜索框会“悬挂”在窗口上方。
那样做的补益是,当客商须要再一次筛选内容的时候,不必再一次腾飞滚动,随即能够输入条件实行搜寻。
以下是本身达成那个效果的笔触如果滚动条的滚动距离使得原来显示的搜索框不可见时【www.602.net】。:
首先,设计叁个藏身的寻觅框。那一个隐形的寻找框的体裁、事件和曾经显得出来的寻觅框是大同小异的。
然后装置隐敝搜索框的岗位“absolute”。
第三,使用Jquery决断,假设滚动条的滚动间隔使得原本彰显的寻找框不可以看到时,显示固定在最上部的藏身寻找框。
如果滚动条的滚动距离使得原来显示的搜索框不可见时【www.602.net】。以下是局部那些功能的有的代码如果滚动条的滚动距离使得原来显示的搜索框不可见时【www.602.net】。:
浮动寻觅框HTML代码:(彰显的寻觅框和这些是一致的,只但是类差别。卡塔尔 复制代码 代码如下:

条件一: 条件二: 条件三:

转换搜索框页面css:(展现的搜索框和那么些样式要长久以来,只不过实际不是设置岗位固定)
复制代码 代码如下: /*www.602.net,下拉框*/ .drop {
width: 175px; } /*转换寻找框中的表格*/ #flowsearchdiv table {
background-color: #484343; color: White; border-top: 2px solid White; }
/*变迁寻觅框中*/ #flowsearchdiv { display:none; position:absolute;
left:217px; } Jquery代码: 复制代码
代码如下: //实现窗口滚动,寻找框不滚动 $ { $.scroll { var top = $; var
flowSearch = $; if { //浮动寻找框隐蔽,淡入效果 flowSearch.css; } else {
flowSearch.css; top = top + 40; flowSearch.css;
到那边基本上大家的效能就出去了。当我们向下滚动滚动条时,假使原先的寻觅框超过页面可视范围,掩瞒找出框显示。从客户的角度看,正是找寻框停在了页面顶端,那样客户的经历就分明啦。
效果图:

发表评论

电子邮件地址不会被公开。 必填项已用*标注