现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索。比如百度图片。为了提高系统用户体验,也想加入这个效果,经过小段时间摸索,基本实现了。代码比较简单,主要是css js控制。具体如下

1.css

部分,主要是设置好两个样式,滚动前的,滚动后的。

/*滚动前的*/
.fossilInfoHead
{
width:40%;
border-radius:2px;
min-width:500px;
} /*滚动后,搜索框位置*/
.fossilInfoHeadNew {
position:fixed;
top:3px;
z-index:5001;
background-color:#F5F5F5;
}

  

2.js部分。主要是控制好css

中两个样式的使用。代码如下:

/*设置图片滚动时,搜索框的位置*/
$('#fossilInfoContainer').unbind('scroll').bind('scroll', function () {
var scrollTop = $(this).scrollTop();
var target = $('. fossilInfoHead');
if (scrollTop >= 38) {
target.addClass('fossilInfoHeadNew').css('right', '72px');
} else {
target.removeClass('fossilInfoHeadNew');
}
});

  主体的代码就是这么一些,不过不知道百度是不是这么实现的,大家可以研究下。

使用jquery实现搜索框的位置变换的更多相关文章

  1. jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框

    jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...

  2. 用jQuery实现搜索框的过滤效果

    遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...

  3. chosen.jquery.js 搜索框只能从头匹配的解决思路+方法

    chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...

  4. Jquery实现搜索框提示功能

    博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...

  5. ASP.NET JQuery 随笔-搜索框默认提示

    一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...

  6. jquery实现搜索框从中间向两边扩展(左右放大)

    显示效果: 隐藏效果: 前端核心代码如下: <div class="search-icon col-md-2 col-sm-2 col-xs-4 col-md-offset-5 col ...

  7. jQuery+HTML5弹出创意搜索框层

    效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...

  8. 使用jQuery和CSS3生成的搜索框变形全屏搜索效果

    在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!

  9. 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)

    需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...

随机推荐

  1. Asp.Net Razor中的Consistent Layout

    有意义的参考:http://www.asp.net/web-pages/tutorials/working-with-pages/3-creating-a-consistent-look Asp.ne ...

  2. Macaca开源--阿里的移动自动化测试框架

    https://github.com/macacajs/macaca-cli 项目在此 https://macacajs.github.io/macaca/cli-usage.html 文档在此 项目 ...

  3. Socket与Http通信

    HTTP(超文本传输协议): HTTP是应用层协议,主要用于解决数据包装的问题. HTTP协议是建立在TCP协议之上的一种应用. HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在 ...

  4. C语言第7次作业

    1 #include<stdio.h> int main() { char name[50];int character[26]={0};int i=0,j;int length=0;wh ...

  5. java.sql.SQLException: ORA-00942: 表或视图不存在

    1.检查JDBC数据源是否配置正确:2.检查表或视图名称是否写错:3.检查Java中数据源的数据库用户是否具有引用该表或视图的权限:

  6. nodejs与模块soap的用法

    最近做了点东西要求用到soap模块,我是怎么知道的呢,收到了 <soap:Body><soap:Fault><faultcode>soap:Client</f ...

  7. eclipse 安装activity插件

    公司做流程需要用到流程插件,之前用了bpm4 activity是基于bpm4延伸的,这里先介绍下activity 插件是如何安装的 官网资料 *Name:*Activiti BPMN 2.0 desi ...

  8. window7下安装第三方包报错及解决

    window7 64位下安装第三方包,,比如安装yaml的exe执行文件,会 报错及解决:python version 2.7(3.4) required,which was not found in ...

  9. [MKRCVCD]Burning SDK report AddFile error

    在使用Pipe通信的使用,我使用GetProcessExitCode这个函数来获取返回值.而ExitCode的定义为DWORD DWORD的原型为unsigned long,在32位程序中,DWORD ...

  10. 爱挑剔的acm程序员 acmer

    2015-9-2 acmer敢于承认自己的错误,并积极改进.自信.有些酷爱运动,各个方面都很优秀:有些则认为出去“玩”就不是玩,有自己的小世界,玩电脑才是最爱. 2015-9-1 acmer都很聪明, ...