首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > JavaScript >

像百度贴吧的这种网页效果是如何做出来的?(垂直往下滚动,网页头部出现一个横条)

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

像百度贴吧的这种网页效果是怎么做出来的?(垂直往下滚动,网页头部出现一个横条)
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指定一些新样式

热点排行