如何让网站导航菜单下拉悬停及导航透明?
事情的起因是这样的~前段时间论坛DX更新后,导航在下拉的时候会停留在顶部并且有一定的透明度。
于是,这个导航就吸引了我,我给自己的站也得加一个,当天跑去百度谷歌,可是一直找不到能解决的办法。无奈暂时放弃!
终于皇天不负有心人啊~~~~在今天我在Specs的站里看到他的导航也是如此,赶紧发问,终于在Spesc博主的帮助下解决了网站导航菜单下拉悬停的问题!
首先,你得在非jquery.1.4.2.min.js的JS文件中加上一段代码:
- var didScroll = false;
- jQuery(window).scroll(function() {
- didScroll = true;
- });
- var y;
- setInterval(function() {
- if ( didScroll ) {
- didScroll = false;
- y = jQuery(window).scrollTop();
- //alert(y);
- if(y > 75){
- jQuery('#nav').addClass('fixed');
- }else{
- jQuery('#nav').removeClass('fixed');
- }
- }
- }, 50);
代码意思我就不解释了,说下需要注意的地方:
第一、#nav 改成你导航CSS的ID,比如喵呜阁网站的是.navbox
第二、75 表示下拉时经过75个像素会给#nav 附加 fixed 属性。修改为适合你网站的值就好。
然后接下来在你网站的css里边加上一段:
- .fixed{z-index:999;top:0;position:fixed;}
到这里就完成了网站导航的下拉悬停功能,不过看到很多网站悬停的导航都是透明的,不要着急,在 .fixed 属性里再添加 opacity:0.75; 其中可以自己调节0.75的值,看看有什么变化!