JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
更新时间：2013年03月27日 16:08:12 作者：
由于分页的效果却又是非常令人厌恶的。滚动条无疑是一种简单而又高效的一种方式。而这里，处于对用户体验的考虑，我使用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实现了一种类似“滚动停靠”的效果。这样当我们向下滚动内容的时候，搜索框会“悬挂（停靠）”在窗口顶端。
这样做的好处是，当用户需要重新筛选内容的时候，不必再次向上滚动，随时可以输入条件进行搜索。
以下是我实现这个效果的思路：
首先，设计一个隐藏的搜索框。这个隐藏的搜索框的样式、事件和已经显示出来的搜索框是一样的。
然后设置隐藏搜索框的位置“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无限轮播相关界面布局、样式与页面元素动态操作实现技巧,需要的朋友可以参考下2019-07-07
这篇文章主要为大家详细介绍了基于jQuery实现滚动切换效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
jq stop()和:is(:animated)的用法及区别(详解)
下面小编就为大家带来一篇jq stop()和:is(:animated)的用法及区别(详解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-02-02
这篇文章主要介绍了Jquery使用css方法改变样式的方法,实例分析了jQuery中css方法操作样式的技巧,需要的朋友可以参考下2015-05-05
jquery中dom操作和事件的实例学习 下拉框应用实现代码，需要的朋友可以参考下。2011-12-12
jQuery选择器源码解读（八）：addCombinator函数
这篇文章主要介绍了jQuery选择器源码解读（八）：addCombinator函数,本文用详细的注释解读了addCombinator函数的实现源码,需要的朋友可以参考下2015-03-03
闲来无事做的一个Jquery实现仿腾讯微博发表广播的特效，功能和样子实现了，由于样式是渣渣，所以小伙伴们想直接用的话，还得自己美化下2014-11-11
在使用jQuery开发的时候，可能还会使用到其他的JS库，比如Prototype，但多库共存时可能会发生冲突，下面这篇文章主要给大家介绍了关于jQuery库冲突的完美解决办法，需要的朋友可以参考借鉴，下面来一起看看吧。2017-05-05
瀑布流就是像瀑布一样的网站——丰富的网站内容，特别是绚美的图片会让你流连忘返。你在浏览网站的时候只需要轻轻滑动一下鼠标滚轮，一切的美妙的图片精彩便可呈现在你面前。瀑布流网站是新兴的一种网站模式——她的典型代表是pinterest、美丽说、蘑菇街这类型的网站。2016-01-01
本文给大家分享两种方法实现''推拉门''动画效果也可以称作是手风琴效果，具体实现方法大家通过本文一起学习吧2017-08-08
最新评论