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 相关文章推荐
Array对象方法参考
Oct 03 Javascript
js 解决“options为空或不是对象”
Dec 22 Javascript
JavaScript框架(iframe)操作总结
Apr 16 Javascript
JS+CSS实现仿msn风格选项卡效果代码
Oct 22 Javascript
微信小程序 特效菜单抽屉效果实例代码
Jan 11 Javascript
jQuery编写textarea输入字数限制代码
Mar 23 jQuery
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
BootStrap Select清除选中的状态恢复默认状态
Jun 20 Javascript
js通过Date对象实现倒计时动画效果
Oct 27 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
vue通过接口直接下载java生成好的Excel表格案例
Oct 26 Javascript
JS实现扫雷项目总结
May 19 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
ThinkPHP分页类使用详解
2014/03/05 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
JavaScript中链式调用之研习
2011/04/07 Javascript
你的 mixin 真的兼容 ECMAScript 5 吗?
2013/04/11 Javascript
基于JavaScript实现 获取鼠标点击位置坐标的方法
2013/04/12 Javascript
jQuery增加与删除table列的方法
2016/03/01 Javascript
JS中parseInt()和map()用法分析
2016/12/16 Javascript
微信小程序  checkbox组件详解及简单实例
2017/01/10 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
微信小程序非swiper组件实现的自定义伪3D轮播图效果示例
2018/12/11 Javascript
Vue组件通信的几种实现方法
2019/04/25 Javascript
layui清除radio的选中状态实例
2019/11/14 Javascript
Python实现的百度站长自动URL提交小工具
2014/06/27 Python
python 系统调用的实例详解
2017/07/11 Python
Python程序包的构建和发布过程示例详解
2019/06/09 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
Python3 实现减少可调用对象的参数个数
2019/12/20 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
解决Keras中循环使用K.ctc_decode内存不释放的问题
2020/06/29 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
伊莱克斯(Electrolux)俄罗斯网上商店:瑞典家用电器品牌
2021/01/23 全球购物
土木工程师岗位职责
2013/11/24 职场文书
毕业生实习鉴定
2013/12/11 职场文书
暑期实习鉴定
2013/12/16 职场文书
致铅球运动员加油稿
2014/02/13 职场文书
主题班会演讲稿
2014/05/22 职场文书
求职信结尾怎么写
2014/05/26 职场文书
低碳环保标语
2014/06/12 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
民主评议党员工作总结
2014/10/20 职场文书
维稳工作承诺书
2015/01/20 职场文书
居安思危观后感
2015/06/11 职场文书
2016春季小学开学寄语
2015/12/03 职场文书
python3实现无权最短路径的方法
2021/05/12 Python