落到实处窗口滚动搜索框停靠效果,类似滚动停靠

当页面须要展示的开始和结果比较多时,大家相当多少人选取分页的不二法门化解。

当页面须要体现的剧情相当多时,大家有的是人选拔分页的点子化解。

而部分时候,分页的效率却又是非凡令人恶感的。滚动条无疑是一种简单而又飞速的一种格局。而那边,处于对用户体验的虚拟,笔者利用Jquery达成了一种恍若“滚动停靠”的效果。那样当大家向下滚动内容的时候,寻找框会“悬挂(停靠)”在窗口上方。

       
而有个别时候,分页的功效却又是老大令人恨恶的。滚动条无疑是一种简易而又急迅的一种方法。而这里,处于对用户体验的思量,作者动用Jquery完结了一种恍若“滚动停靠”的功用。那样当大家向下滚动内容的时候,寻找框会“悬挂(停靠)”在窗口上方。

那样做的利润是,当用户必要重新筛选内容的时候,不必再度上扬滚动,随时能够输入条件进行检索。

       
那样做的收益是,当用户需求重新筛选内容的时候,不必再度上扬滚动,随时能够输入条件实行搜寻。

以下是自个儿完毕那些功能的思绪
先是,设计三个逃匿的找出框。那么些遮掩的寻觅框的体制、事件和早已展示出来的寻找框是同等的。
然后设置遮掩寻觅框的地点“absolute”。
其三,使用Jquery决断,就算滚动条的滚动距离使得原来显示的寻找框不可见时,突显固定在最上端的潜伏寻找框。

        以下是自家达成那几个功用的笔触:

以下是有的这几个意义的片段代码:
扭转寻觅框HTML代码:(显示的找寻框和这些是均等的,只可是类不一致。)

       
首先,设计二个逃匿的找出框。这几个遮蔽的搜索框的样式、事件和早就显示出来的寻觅框是一致的。

复制代码 代码如下:

        然后安装隐蔽搜索框的岗位“absolute”。

<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>

       
第三,使用Jquery决断,如若滚动条的滚动距离使得原来展现的寻觅框不可知时,呈现固定在最上端的掩盖寻找框。

浮动找出框页面css:(展现的搜索框和这些样式要一律,只但是并不是设置任务一定)

        以下是部分那么些意义的部分代码:

复制代码 代码如下:

改动寻觅框HTML代码:(展现的搜索框和这些是一致的,只不过类区别。)

/*下拉框*/
.drop
{
width: 175px;
}
/*变化寻找框中的表格*/
#flowsearchdiv table
{
background-color: #484343;
color: White;
border-top: 2px solid White;
}
/*变动搜索框中*/
#flowsearchdiv
{
display:none;
position:absolute;
left:217px;
}

[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> 

Jquery代码:

<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:(彰显的搜索框和这么些样式要平等,只但是并非设置岗位固定)

复制代码 代码如下:

[css] 
/*下拉框*/ 
.drop 

    width: 175px; 

/*变动找出框中的表格*/ 
#flowsearchdiv table 

    background-color: #484343; 
    color: White; 
    border-top: 2px solid White; 

/*改变寻找框中*/ 
#flowsearchdiv 

    display:none; 
    position:absolute; 
    left:217px; 

//达成窗口滚动,寻找框不滚动
$(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);
}
});

/*下拉框*/
.drop
{
    width: 175px;
}
/*浮动找寻框中的表格*/
#flowsearchdiv table
{
    background-color: #484343;
    color: White;
    border-top: 2px solid White;
}
/*变迁寻觅框中*/
#flowsearchdiv
{
    display:none;
    position:absolute;
    left:217px;
必发365手机版,}Jquery代码:

});

[javascript] 
//实现窗口滚动,寻觅框不滚动  
$(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); 
        } 
    }); 
 
}); 

到此地基本上大家的法力就出去了。当大家向下滚动滚动条时,纵然原来的寻觅框超越页面可视范围,遮蔽找出框展现。从用户的角度看,正是探求框停在了页面最上端,这样用户的心得就显明啦。
效果图:
必发365手机版 1

//达成窗口滚动,搜索框不滚动
$(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带搜索框的下拉菜单
  • CSS3,HTML5和jQuery找寻框集锦
  • jQuery EasyUI API 普通话文书档案找寻框
  • Jquery实现寻找框提示功用示例代码
  • jquery
    模拟类寻找框自动完结寻找提醒成效(创新)
  • jQuery
    插件仿百度寻找框智能提示(带Value值)
  • jquery+php落成找出框自动唤醒
  • jQuery完毕的左近Taobao网址寻觅框样式代码分享
  • jQuery搜索框效果落实代码(百度重大词联想)

});
       
到此地基本上大家的功力就出去了。当大家向下滚动滚动条时,假设原来的寻找框赶上页面可视范围,掩盖寻觅框展现。从用户的角度看,即是搜索框停在了页面顶端,那样用户的感受就超出言语以外啦。

 

 

而偶然,分页的机能却又是杰出令人反感的。滚动条无疑是一种轻松…

相关文章

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*
*
Website