使用jquery实现搜索框的位置变换
现在很多的网站都存在这样一个效果:当用户搜索信息后,滚动内容时,搜索框的位置会产生变化,会固定在某个位置,方便用户进行再次搜索。比如百度图片。为了提高系统用户体验,也想加入这个效果,经过小段时间摸索,基本实现了。代码比较简单,主要是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实现搜索框的位置变换的更多相关文章
- jQuery实现搜索框插件+豆瓣音乐接口实现豆瓣搜索框
jQuery实现搜索框插件 豆瓣音乐接口实现豆瓣搜索框 豆瓣接口有时不稳定,网络请求会报400,不要惊慌.我主要是练习一下jQuery的JSONP和封装插件. <div class=" ...
- 用jQuery实现搜索框的过滤效果
遇到的问题: 1.动态添加了某些元素,在动态添加的某个元素上绑定事件失效 原因:因为需要绑定的元素的直接父元素也是动态添加的解决:向上为上一级父元素绑定事件 $(".check-box&qu ...
- chosen.jquery.js 搜索框只能从头匹配的解决思路+方法
chosen.jquery.js 搜索框只能从头匹配的解决思路+方法 心急者请直接看下方 总结 ,由于本问题未能找到直接答案,所以只能通过修改源码解决.故将修改源码思路贴出来供大家参考,在遇到其他改源 ...
- Jquery实现搜索框提示功能
博客的前某一篇文章中http://www.cnblogs.com/hEnius/p/2013-07-01.html写过一个用Ajax来实现一个文本框输入的提示功能.最近在一个管理项目的项目中,使用后发 ...
- ASP.NET JQuery 随笔-搜索框默认提示
一.文本框中创建默认文本提示 通常用户在搜索内容时,在文本框输入内容前,文本框都会给出默认提示,提示用户输入正确的内容进行搜索. 当文本框获得焦点,如果文本框内容跟提示内容一样,提示内容会自然消失. ...
- jquery实现搜索框从中间向两边扩展(左右放大)
显示效果: 隐藏效果: 前端核心代码如下: <div class="search-icon col-md-2 col-sm-2 col-xs-4 col-md-offset-5 col ...
- jQuery+HTML5弹出创意搜索框层
效果体验:http://hovertree.com/texiao/jquery/26/ 本效果适用于移动设备,可以使用手机等浏览效果. 代码下载:http://hovertree.com/h/bjaf ...
- 使用jQuery和CSS3生成的搜索框变形全屏搜索效果
在线演示 本地下载 使用jQuery和CSS3过渡变形效果生成的一个搜索框变形效果实现,可以帮助你更好利用页面格式和内容.实验性质的代码,请大家在产品环境里自己修改使用!
- 分享一个jquery写的类似于百度的搜索框,(可动态配置,可单列或者table格式,可填充数据)
需求:类似于百度的搜索框,可配置,可单列可table格式,可填充数据.页面可多次使用,简单,易用. 想法:使用jquery,css,ajax,前台调用,后台返回json数据. jquery代码: va ...
随机推荐
- Asp.Net Razor中的Consistent Layout
有意义的参考:http://www.asp.net/web-pages/tutorials/working-with-pages/3-creating-a-consistent-look Asp.ne ...
- Macaca开源--阿里的移动自动化测试框架
https://github.com/macacajs/macaca-cli 项目在此 https://macacajs.github.io/macaca/cli-usage.html 文档在此 项目 ...
- Socket与Http通信
HTTP(超文本传输协议): HTTP是应用层协议,主要用于解决数据包装的问题. HTTP协议是建立在TCP协议之上的一种应用. HTTP连接最显著的特点是客户端发送的每次请求都需要服务器回送响应,在 ...
- C语言第7次作业
1 #include<stdio.h> int main() { char name[50];int character[26]={0};int i=0,j;int length=0;wh ...
- java.sql.SQLException: ORA-00942: 表或视图不存在
1.检查JDBC数据源是否配置正确:2.检查表或视图名称是否写错:3.检查Java中数据源的数据库用户是否具有引用该表或视图的权限:
- nodejs与模块soap的用法
最近做了点东西要求用到soap模块,我是怎么知道的呢,收到了 <soap:Body><soap:Fault><faultcode>soap:Client</f ...
- eclipse 安装activity插件
公司做流程需要用到流程插件,之前用了bpm4 activity是基于bpm4延伸的,这里先介绍下activity 插件是如何安装的 官网资料 *Name:*Activiti BPMN 2.0 desi ...
- window7下安装第三方包报错及解决
window7 64位下安装第三方包,,比如安装yaml的exe执行文件,会 报错及解决:python version 2.7(3.4) required,which was not found in ...
- [MKRCVCD]Burning SDK report AddFile error
在使用Pipe通信的使用,我使用GetProcessExitCode这个函数来获取返回值.而ExitCode的定义为DWORD DWORD的原型为unsigned long,在32位程序中,DWORD ...
- 爱挑剔的acm程序员 acmer
2015-9-2 acmer敢于承认自己的错误,并积极改进.自信.有些酷爱运动,各个方面都很优秀:有些则认为出去“玩”就不是玩,有自己的小世界,玩电脑才是最爱. 2015-9-1 acmer都很聪明, ...