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 播放器 控制
Jan 22 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&amp;闭包&amp;减缓全局空间污染
Nov 16 Javascript
JavaScript面向对象知识串结(读JavaScript高级程序设计(第三版))
Jul 17 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
js检测浏览器版本、核心、是否移动端示例
Apr 24 Javascript
jQuery自带的一些常用方法总结
Sep 03 Javascript
JavaScript基础知识学习笔记
Dec 02 Javascript
node.js中的fs.truncateSync方法使用说明
Dec 15 Javascript
Bootstrap每天必学之栅格系统(布局)
Nov 25 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
jQuery获取this当前对象子元素对象的方法
Nov 29 Javascript
微信小程序上传图片到服务器实例代码
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实现从ftp服务器上下载文件树到本地电脑的程序
2009/02/10 PHP
PHP5 操作MySQL数据库基础代码
2009/09/29 PHP
php实现的获取网站备案信息查询代码(360)
2013/09/23 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
php cli配置文件问题分析
2015/10/15 PHP
JS(jQuery)实现聊天接收到消息语言自动提醒功能详解【提示“您有新的消息请注意查收”】
2019/04/16 PHP
修改Laravel自带的认证系统的User类的命名空间的步骤
2019/10/15 PHP
Javascript hasOwnProperty 方法 &amp; in 关键字
2008/11/26 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
Javascript Ajax异步读取RSS文档具体实现
2013/12/12 Javascript
深入探密Javascript数组方法
2015/01/08 Javascript
jQuery大于号(&gt;)选择器的作用解释
2015/01/13 Javascript
jquery实现图片随机排列的方法
2015/05/04 Javascript
javascript实现根据iphone屏幕方向调用不同样式表的方法
2015/07/13 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
2016/04/29 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
2016/10/13 Javascript
基于vue的短信验证码倒计时demo
2017/09/13 Javascript
微信小程序实现之手势锁功能实例代码
2018/07/19 Javascript
Python的迭代器和生成器
2015/07/29 Python
python字符类型的一些方法小结
2016/05/16 Python
django自定义模板标签过程解析
2019/12/14 Python
浅析Python数字类型和字符串类型的内置方法
2019/12/22 Python
jupyter notebook 增加kernel教程
2020/04/10 Python
中国跨境在线时尚零售商:Bellelily
2018/04/06 全球购物
大都会艺术博物馆商店:The Met Store
2018/06/22 全球购物
Koral官方网站:女性时尚运动服
2019/04/10 全球购物
马来西亚在线购物市场:PGMall.my
2019/10/13 全球购物
建筑学推荐信
2013/11/03 职场文书
应届护士求职信范文
2014/01/26 职场文书
致标枪运动员加油稿
2014/02/15 职场文书
食品质量与安全专业毕业生求职信
2014/08/11 职场文书
golang http使用踩过的坑与填坑指南
2021/04/27 Golang
python b站视频下载的五种版本
2021/05/27 Python
浅谈MySQL 亿级数据分页的优化
2021/06/15 MySQL
SQL Server使用导出向导功能
2022/04/08 SQL Server
VW、VH适配移动端的解决方案与常见问题
2023/05/21 HTML / CSS