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 相关文章推荐
两种方法实现文本框输入内容提示消失
Mar 17 Javascript
js获取视频时长代码
Apr 10 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
AngularJS 让人爱不释手的八种功能
Mar 23 Javascript
简单的分页代码js实现
May 17 Javascript
jQuery 3.0中存在问题及解决办法
Jul 15 Javascript
JS新包管理工具yarn和npm的对比与使用入门
Dec 09 Javascript
JS监控关闭浏览器操作的实例详解
Sep 12 Javascript
Webpack 服务器端代码打包的示例代码
Sep 19 Javascript
微信小程序progress组件使用详解
Jan 31 Javascript
JS实现碰撞检测效果
Mar 12 Javascript
vue使用video插件vue-video-player的示例
Oct 03 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
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
简单实用的.net DataTable导出Execl
2013/10/28 PHP
在Linux系统下一键重新安装WordPress的脚本示例
2015/06/30 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
从父页面读取和操作iframe中内容方法
2009/07/25 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
2010/04/01 Javascript
setTimeout的延时为0时多个浏览器的区别
2012/05/23 Javascript
zTree插件之单选下拉菜单实例代码
2013/11/07 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
2013/11/22 Javascript
jQuery表格插件datatables用法详解
2020/11/23 Javascript
理解JS绑定事件
2016/01/19 Javascript
一分钟理解js闭包
2016/05/04 Javascript
JS自定义混合Mixin函数示例
2016/11/26 Javascript
Javascript中return的使用与闭包详解
2017/01/11 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
vue单页开发父子组件传值思路详解
2018/05/18 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
angularjs实现对表单输入改变的监控(ng-change和watch两种方式)
2018/08/29 Javascript
在vue项目中引入highcharts图表的方法
2019/01/21 Javascript
electron-vue利用webpack打包实现多页面的入口文件问题
2019/05/12 Javascript
JS前端面试必备——基本排序算法原理与实现方法详解【插入/选择/归并/冒泡/快速排序】
2020/02/24 Javascript
[06:23]2014DOTA2西雅图国际邀请赛 小组赛7月12日TOPPLAY
2014/07/12 DOTA
python通过实例讲解反射机制
2019/10/17 Python
Python 面向对象之封装、继承、多态操作实例分析
2019/11/21 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
new_zeros() pytorch版本的转换方式
2020/02/18 Python
Python基于jieba, wordcloud库生成中文词云
2020/05/13 Python
Python实现自动签到脚本的示例代码
2020/08/19 Python
吃空饷专项治理工作实施方案
2014/03/04 职场文书
技术总监管理职责范本
2014/03/06 职场文书
建筑工程专业大学生求职信
2014/04/23 职场文书
组工干部演讲稿
2014/09/02 职场文书
信用卡工资证明范本
2015/06/19 职场文书
对Keras自带Loss Function的深入研究
2021/05/25 Python
spring cloud 配置中心native配置方式
2021/09/25 Java/Android