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 相关文章推荐
20个非常有用的PHP类库 加速php开发
Jan 15 Javascript
jQuery和AngularJS的区别浅析
Jan 29 Javascript
JavaScript取得键盘按下方向键是哪个的方法
Aug 04 Javascript
Vue.js实例方法之生命周期详解
Jul 03 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
Mar 01 Javascript
vue 组件中添加样式不生效的解决方法
Jul 06 Javascript
通过jquery的ajax请求本地的json文件方法
Aug 08 jQuery
js笔试题-接收get请求参数
Jun 15 Javascript
javascript实现日历效果
Jun 17 Javascript
解决vue scoped scss 无效的问题
Sep 04 Javascript
解决vue2中使用elementUi打包报错的问题
Sep 22 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 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检测iis环境是否支持htaccess的方法
2014/02/18 PHP
phpMyAdmin无法登陆的解决方法
2017/04/27 PHP
PHP读取并输出XML文件数据的简单实现方法
2017/12/22 PHP
PHP大文件切割上传功能实例分析
2019/07/01 PHP
jQuery 获取URL参数的插件
2010/03/04 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
jquery实现下拉菜单的二级联动利用json对象从DB取值显示联动
2014/03/27 Javascript
Javascript 引擎工作机制详解
2016/11/30 Javascript
JavaScript日期对象(Date)基本用法示例
2017/01/18 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
vue-router 权限控制的示例代码
2017/09/21 Javascript
详解Angular6 热加载配置方案
2018/08/18 Javascript
js实现轮播图的完整代码
2020/10/26 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[01:07:22]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG加赛
2014/05/26 DOTA
Python实现合并字典的方法
2015/07/07 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
OpenCV-Python 摄像头实时检测人脸代码实例
2019/04/30 Python
使用Flask-Cache缓存实现给Flask提速的方法详解
2019/06/11 Python
python binascii 进制转换实例
2019/06/12 Python
Python抓包程序mitmproxy安装和使用过程图解
2020/03/02 Python
Windows10+anacond+GPU+pytorch安装详细过程
2020/03/24 Python
HTML5组件Canvas实现图像灰度化(步骤+实例效果)
2013/04/22 HTML / CSS
电子商务专员岗位职责
2013/12/11 职场文书
大学校运会广播稿
2014/02/03 职场文书
乡镇干部十八大感言
2014/02/17 职场文书
家长通知书家长评语
2014/04/17 职场文书
《与朱元思书》的教学反思
2014/04/17 职场文书
机关保密工作承诺书
2015/05/04 职场文书
2016年公司中秋节致辞
2015/11/26 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python
MySQL慢查询优化解决问题
2022/03/17 MySQL