本文主要包含导航固定,固定菜单等相关知识,佚名 希望在学习及工作中可以帮助到您
最近开发的一个网站头部分为上下两块,上面是快捷入口部分,下面是导航菜单部分。现在的需求是当页面往下拉时,快捷入口部分被遮住,而导航菜单固定,而且处于window最上面。在StackOverflow网站上搜集过资料,并且参照网站http://ilikecss.com/web-design/examples/framework/20110928/的源代码,发现实现该功能的关键步骤有两点,第一点是需要创建两个header,一个是固定的导航菜单栏,一个是常规的头部(包括快捷入口部分和导航菜单)。另外一点是需要设置z-index的值(对于非static的position来说,z-index越大,它离用户也就越近,这样就可以在初始时遮住固定部分的导航菜单,而当页面往下拉时,随着常规菜单被遮住,固定部分也就浮出来了。)
具体效果请转往jsfiddle网站:http://jsfiddle.net/tounaobun/AnTQU/
下面是具体代码:
具体效果请转往jsfiddle网站:http://jsfiddle.net/tounaobun/AnTQU/
下面是具体代码: