使用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');
            }
        });

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