使用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 ...
随机推荐
- Centos6.5 python2.7连接mysql数据库
1.环境是centos6.5 32位系统,python版本是2.7.12,mysql版本是5.5.22.准备好所需压缩包,MySQL-python-1.2.4b4.tar.gz pip-6.0.7. ...
- VIP
高可用性HA(High Availability)指的是通过尽量缩短因日常维护操作(计划)和突发的系统崩溃(非计划)所导致的停机时间,以提高系统和应用的可用性.HA系统是目前企业防止核心计算机系统因故 ...
- 把 MWeb Lite 的文档库文档和数据搬到 MWeb 正式版中
MWeb Lite 版的文档库中的文档要搬到 MWeb 正式版中,如果 Lite 版的文档中没有图片或者只有少量图片,可以用导入导出为 Markdown 的方法. 否则的话请用以下方式(注意下面这个方 ...
- Android targetSdkVersion 对生命周期的影响
一直都认为当手机进入休眠时,Activity的生命周期会进入onPause()-->onStop()状态,但是今天偶然遇到了一个百思不得其解的问题,如果在AndroidMainfest.xml文 ...
- 论AVL树与红黑树
首先讲解一下AVL树: 例如,我们要输入这样一串数字,10,9,8,7,15,20这样一串数字来建立AVL树 1,首先输入10,得到一个根结点10 2,然后输入9, 得到10这个根结点一个左孩子结点9 ...
- simvision使用
Access Design Source Code: 1)通过file---open来打开, 2)通过send to source viewer来看, 双击信号,进行driver的trace,显示在左 ...
- (一)sql入门 导读
从转行做软件始,就开始接触sql,但还是不怎么深入,回忆3月份找工作的时候,左关联都没有写出来,真是丢脸,以此博客做个认真的开始. 以后的日子,遇到了圆柱体的空心物体,我就应该联想到一样东西,那就是数 ...
- linux关闭双显卡的方法
我正在使用的一体机是双显卡,在linux下没有很么太好的办法来切换双显卡, 导致使用一会儿后就发烫,关键是这时风扇呜呜的响很吵人 最后找到了下面的解决方法来关掉独立显卡 见 https://githu ...
- java第四次作业
(一)一个字节 import java.io.*; /** * 实现文件复制 * @author Administrator * */public class CopyFile { public st ...
- ASP.NET 发布到IIS后支撑woff 的解决方案
<system.webServer> <staticContent> <remove fileExtension=".woff" ...