上门一对一计算机家教
当前位置: 首页 > 建站心得 >

jQuery和CSS3固定顶部菜单特效

点击: 时间:2016-09-25 来源:北京家教网
参见如下演示效果: http://www.htmleaf.com/Demo/201510222697.html 原理: 将banner和导航包含在一个DIV层header里面,将这个层设位置定位设为:fixed,这样顶部就固定在上方了 问题来了,header层设为fixed后,本自不占高度,所以下

参见如下演示效果:

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

原理:

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

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

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

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

------分隔线----------------------------