日期:2014-05-16  浏览次数:20368 次

像百度贴吧的这种网页效果是怎么做出来的?(垂直往下滚动,网页头部出现一个横条)
http://tieba.baidu.com/f?kw=csdn&ie=utf-8

滚动条往下拉就会出现,这是怎么做出来的?

------解决方案--------------------
滚动前的搜索框和滚动后的搜索是同一个,只不过滚动前后的类名不一样,样式自然也不一样(如滚动前position正常,滚动后就成了fixed定位)。

一般是绑定滚动事件监听来实现~~当窗口的scrollTop大于等于一定高度时,给该搜索部分加上新类名,小于一定高度时候去掉添加的类名。用jquery实现,如:


$(window).scroll(function(){
    if($(windnow).scrollTop()>=500){
        $(搜索框).addClass('newClassName');
    }else{
        $(搜索框).removeClass('newClassName');
    }
});
//此外 还要在css中 以newClassName指定一些新样式