北京电脑家教

当前位置: 首页 > 建站心得 >

jQuery和CSS3固定顶部菜单特效

时间:2016-09-25 16:49 来源:【星期八家教网】

参见如下演示效果:

http://www.htmleaf.com/Demo/201510222697.html

原理:

将banner和导航包含在一个DIV层header里面,将这个层设位置定位设为:fixed,这样顶部就固定在上方了

问题来了,header层设为fixed后,本自不占高度,所以下方的内容自动顶到上面去了,解决方法:给body设置padding-top值,等于header层的高度,这样下方内容就被赶到下面去了,不至于压在底层。

步骤二:引用js,当向下滑动超过30px的时候,body引入新的样式,新样式将重定义body的padding值,同时将banner隐藏掉

明白了原理,就可以运用自如了,几个固定的js文件必须引入,否则无效

上一篇:openclinica安装部署指南之eCRF的模板内容

下一篇:使用虚拟机VMware安装linux系统CentOS7 界面图形化

推荐阅读

用js实现导航菜单点击切换选中时高
返回顶部↑