标签：
现在很多的网站都存在这样一个效果：当用户搜索信息后，滚动内容时，搜索框的位置会产生变化，会固定在某个位置，方便用户进行再次搜索。比如百度图片。为了提高系统用户体验，也想加入这个效果，经过小段时间摸索，基本实现了。代码比较简单，主要是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‘);
}
});
主体的代码就是这么一些，不过不知道百度是不是这么实现的，大家可以研究下。
标签：
原文地址：http://www.cnblogs.com/airbreak/p/4595465.html
