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 相关文章推荐
Maps Javascript
Jan 22 Javascript
jQuery简易图片放大特效示例代码
Jun 09 Javascript
JS实现的简洁二级导航菜单雏形效果
Oct 13 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
微信小程序表单验证错误提示效果
May 19 Javascript
node跨域请求方法小结
Aug 25 Javascript
基于 Vue 实现一个酷炫的 menu插件
Nov 14 Javascript
基于jQuery实现无缝轮播与左右点击效果
May 13 jQuery
JavaScript实现的3D旋转魔方动画效果实例代码
Jul 31 Javascript
Vue登录主页动态背景短视频制作
Sep 21 Javascript
Layui事件监听的实现(表单和数据表格)
Oct 17 Javascript
Vue SPA 首屏优化方案
Feb 26 Vue.js
早该知道的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 程式大小
2006/12/06 PHP
phpize的深入理解
2013/06/03 PHP
Yii查询生成器(Query Builder)用法实例教程
2014/09/04 PHP
php简单判断文本编码的方法
2015/07/30 PHP
PHP添加图片水印、压缩、剪切的封装类
2015/08/17 PHP
PHP实现的杨辉三角求解算法分析
2019/03/11 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
DWZ刷新dialog解决方法
2013/03/03 Javascript
js实现连个数字相加而不是拼接的方法
2014/02/23 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
Js+php实现异步拖拽上传文件
2015/06/23 Javascript
JavaScript实现的圆形浮动标签云效果实例
2015/08/06 Javascript
nodeJs爬虫获取数据简单实现代码
2016/03/29 NodeJs
Seajs是什么及sea.js 由来,特点以及优势
2016/10/13 Javascript
jQuery中animate()的使用方法及解决$(”body“).animate({“scrollTop”:top})不被Firefox支持的问题
2017/04/04 jQuery
原生JavaScript实现todolist功能
2018/03/02 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
JS简单数组排序操作示例【sort方法】
2019/05/17 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
Vue自定义多选组件使用详解
2020/09/08 Javascript
Vue3 响应式侦听与计算的实现
2020/11/11 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
Python实现的二维码生成小软件
2014/07/11 Python
Python获取电脑硬件信息及状态的实现方法
2014/08/29 Python
Python字符串逐字符或逐词反转方法
2015/05/21 Python
利用Python+阿里云实现DDNS动态域名解析的方法
2019/04/01 Python
基于HTML5超酷摄像头(HTML5 webcam)拍照功能实现代码
2012/12/13 HTML / CSS
英国标志性生活方式品牌:Skinnydip London
2019/12/15 全球购物
岗位职责定义及内容
2013/11/08 职场文书
认购协议书范本
2014/04/22 职场文书
产品发布会策划方案
2014/05/12 职场文书
2014年仓库管理员工作总结
2014/11/18 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
学长教您写论文:经验总结
2019/07/09 职场文书
go语言中GOPATH GOROOT的作用和设置方式
2021/05/05 Golang
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python