像百度贴吧的这种网页效果是怎么做出来的？（垂直往下滚动，网页头部出现一个横条）

Question

图片顺序弄错了， 第一张是滚动后，第二张是滚动前。

Answer 1

滚动前的搜索框和滚动后的搜索是同一个，只不过滚动前后的类名不一样，样式自然也不一样（如滚动前position正常，滚动后就成了fixed定位）。一般是绑定滚动事件监听来实现~~当窗口的scrollTop大于等于一定高度时，给该搜索部分加上新类名，小于一定高度时候去掉添加的类名。用jquery实现，如：
$(window).scroll(function(){
    if($(windnow).scrollTop()>=500){
        $(搜索框).addClass('newClassName');
    }else{
        $(搜索框).removeClass('newClassName');
    }
});
//此外 还要在css中 以newClassName指定一些新样式