首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

JQUERY 兑现窗口滚动搜索框停靠效果

2013-03-27 
JQUERY 实现窗口滚动搜索框停靠效果当页面需要显示的内容较多时,我们很多人采用分页的方法解决。而有的时候

JQUERY 实现窗口滚动搜索框停靠效果

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

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

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

        以下是我实现这个效果的思路:

        首先,设计一个隐藏的搜索框。这个隐藏的搜索框的样式、事件和已经显示出来的搜索框是一样的。

        然后设置隐藏搜索框的位置“absolute”。

        第三,使用Jquery判断,如果滚动条的滚动距离使得原来显示的搜索框不可见时,显示固定在顶部的隐藏搜索框。

        以下是一些这个效果的一些代码:

浮动搜索框HTML代码:(显示的搜索框和这个是一样的,只不过类不同。)




热点排行