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


Posted in Javascript onMarch 27, 2013

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

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

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

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

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

<div id ="flowsearchdiv"> 
<table class="flowsearch"> 
<tr> 
<td class="conditionname">条件一:</td> 
<td class="condition"> 
<asp:DropDownList ID="dropFlowCondition1" CssClass="drop" runat="server"> 
</asp:DropDownList> 
</td> 
<td class="conditionname">条件二:</td> 
<td class="condition"> 
<asp:DropDownList ID="droFlowCondition2" CssClass="drop" runat="server"> 
</asp:DropDownList> 
</td> 
<td class="conditionname">条件三:</td> 
<td class="condition"> 
<asp:DropDownList ID="dropFlowCondition3" CssClass="drop" runat="server"> 
</asp:DropDownList> 
</td> 
<td class="conditionname"> 
<asp:Button ID="flowbtnsearch" CssClass="btn" runat="server" Text="查询" /> 
</td> 
</tr> 
</table> 
</div>

浮动搜索框页面css:(显示的搜索框和这个样式要一样,只不过不要设置位置固定)
/*下拉框*/ 
.drop 
{ 
width: 175px; 
} 
/*浮动搜索框中的表格*/ 
#flowsearchdiv table 
{ 
background-color: #484343; 
color: White; 
border-top: 2px solid White; 
} 
/*浮动搜索框中*/ 
#flowsearchdiv 
{ 
display:none; 
position:absolute; 
left:217px; 
}

Jquery代码:
//实现窗口滚动,搜索框不滚动 
$(function () { 
$(window).scroll(function () { 
var top = $(this).scrollTop(); 
var flowSearch = $("#flowsearchdiv"); 
if (top - 36 < 0) { 
//浮动搜索框隐藏,淡入效果 
flowSearch.css("display", "none"); 
} else { 
flowSearch.css("display", "block"); 
top = top + 40; 
flowSearch.css("top", top); 
} 
}); });

到这里基本上我们的效果就出来了。当我们向下滚动滚动条时,如果原来的搜索框超出页面可视范围,隐藏搜索框显示。从用户的角度看,就是搜索框停在了页面顶部,这样用户的体验就不言而喻啦。
效果图:
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Javascript 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
javascript 常用方法总结
Jun 03 Javascript
ExtJS Ext.MessageBox.alert()弹出对话框详解
Apr 02 Javascript
JS取得绝对路径的实现代码
Jan 16 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
vue数据双向绑定原理解析(get &amp; set)
Mar 08 Javascript
详谈构造函数加括号与不加括号的区别
Oct 26 Javascript
vue二级路由设置方法
Feb 09 Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 Javascript
atom-design(Vue.js移动端组件库)手势组件使用教程
May 16 Javascript
简述pm2常用命令集合及配置文件说明
May 30 Javascript
早该知道的7个JavaScript技巧
Mar 27 #Javascript
JavaScript中的style.display属性操作
Mar 27 #Javascript
jquery ajax提交整个表单元素的快捷办法
Mar 27 #Javascript
jQuery渐变发光导航菜单的实例代码
Mar 27 #Javascript
鼠标放在图片上显示大图的JS代码
Mar 26 #Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 #Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 #Javascript
You might like
PHP安装全攻略:APACHE
2006/10/09 PHP
oracle资料库函式库
2006/10/09 PHP
php结合web uploader插件实现分片上传文件
2016/05/10 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
Jquery在指定DIV加载HTML示例代码
2014/02/17 Javascript
js document.write()使用介绍
2014/02/21 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
使用jquery的jsonp如何发起跨域请求及其原理详解
2017/08/17 jQuery
Thinkjs3新手入门之添加一个新的页面
2017/12/06 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
JavaScript实现小球沿正弦曲线运动
2020/09/07 Javascript
webpack 代码分离优化快速指北
2019/05/18 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
在Python中使用sort()方法进行排序的简单教程
2015/05/21 Python
Python网络爬虫实例讲解
2016/04/28 Python
Python中asyncore异步模块的用法及实现httpclient的实例
2016/06/28 Python
python不换行之end=与逗号的意思及用途
2017/11/21 Python
使用Django启动命令行及执行脚本的方法
2018/05/29 Python
Python 微信之获取好友昵称并制作wordcloud的实例
2019/02/21 Python
Python Django框架实现应用添加logging日志操作示例
2019/05/17 Python
python使用协程实现并发操作的方法详解
2019/12/27 Python
python3 配置logging日志类的操作
2020/04/08 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
H5 canvas中width、height和style的宽高区别详解
2018/11/02 HTML / CSS
台湾母婴用品购物网站:Infant婴之房
2018/06/15 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
波兰电子产品购物网站:Vobis
2019/05/26 全球购物
Onzie官网:美国时尚瑜伽品牌
2019/08/21 全球购物
医院保洁服务方案
2014/06/11 职场文书
领导干部作风建设总结
2014/10/23 职场文书
高中生自我评价范文2015
2015/03/03 职场文书
会计出纳岗位职责
2015/03/31 职场文书