Jquery中文网 www.jquerycn.cn
Jquery中文网 >  jQuery  >  jquery 教程  >  正文 JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)

JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)

发布时间:2013-11-27   编辑:www.jquerycn.cn
由于分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里,处于对用户体验的考虑,我使用Jquery实现了一种类似滚动停靠的效果,感兴趣的朋友可以参考下哈
当页面需要显示的内容较多时,我们很多人采用分页的方法解决。

而有的时候,分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里,处于对用户体验的考虑,我使用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 实现窗口滚动搜索框停靠效果(类似滚动停靠)
jquery.blockUI.js上传滚动等待效果实现思路及代码
jQuery侧边栏随窗口滚动实现方法
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
jQuery创建平滑的页面滚动(顶部或底部)
jquery实现图片左右间隔滚动特效(可自动播放)
jquery实现的一个导航滚动效果具体代码
jQuery+css实现图片滚动效果(附源码)
jQuery图片滚动图片的效果(另类实现)
js页面滚动时层智能浮动定位实现(jQuery/MooTools)

关键词: 滚动  停靠   
[关闭]