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 相关文章推荐
用javascript实现自定义标签
May 08 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
巧用局部变量提升javascript性能
Feb 24 Javascript
JavaScript Math 对象常用方法总结
Apr 28 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
jQuery简单实现遍历单选框的方法
Mar 06 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
vuejs前后端数据交互之从后端请求数据的实例
Aug 11 Javascript
p5.js临摹动态图形实现方法详解
Oct 23 Javascript
JavaScript实现简单进度条效果
Mar 25 Javascript
解决vue请求接口第一次成功,第二次失败问题
Sep 08 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脚本的10个技巧(8)
2006/10/09 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
php中使用gd库实现远程图片下载实例
2015/05/12 PHP
php微信公众平台交互与接口详解
2016/11/28 PHP
jquery tools 系列 scrollable(2)
2009/09/06 Javascript
在模板页面的js使用办法
2010/04/01 Javascript
jQuery下的几个你可能没用过的功能
2010/08/29 Javascript
JQuery小知识
2010/10/15 Javascript
JS禁用浏览器退格键实现思路及代码
2013/10/29 Javascript
javascript实现画不相交的圆
2015/04/07 Javascript
jQuery()方法的第二个参数详解
2015/04/29 Javascript
JavaScript中Math.SQRT2属性的使用详解
2015/06/14 Javascript
JavaScript检测字符串中是否含有html标签实现方法
2015/07/01 Javascript
JS实现回到页面顶部动画效果的简单实例
2016/05/24 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
利用Node.js对文件进行重命名
2017/03/12 Javascript
JS实现加载时锁定HTML页面元素的方法
2017/06/24 Javascript
详解如何在vue项目中引入elementUI组件
2018/02/11 Javascript
jQuery中的for循环var与let的区别
2018/04/21 jQuery
详解webpack+ES6+Sass搭建多页面应用
2018/11/05 Javascript
详解Python中的join()函数的用法
2015/04/07 Python
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
python使用logging模块发送邮件代码示例
2018/01/18 Python
Python使用Selenium模块模拟浏览器抓取斗鱼直播间信息示例
2018/07/18 Python
Python面向对象基础入门之设置对象属性
2018/12/11 Python
Python检查 云备份进程是否正常运行代码实例
2019/08/22 Python
QML使用Python的函数过程解析
2019/09/26 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
python爬取招聘要求等信息实例
2020/11/20 Python
英国领先的鞋类零售商:Shoe Zone
2018/12/13 全球购物
函授自我鉴定
2013/11/06 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
师德先进个人材料
2014/12/20 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
详解Django的MVT设计模式
2021/04/29 Python
用几道面试题来看JavaScript执行机制
2021/04/30 Javascript