如何让网站导航菜单下拉悬停及导航透明?

事情的起因是这样的~前段时间论坛DX更新后,导航在下拉的时候会停留在顶部并且有一定的透明度。

于是,这个导航就吸引了我,我给自己的站也得加一个,当天跑去百度谷歌,可是一直找不到能解决的办法。无奈暂时放弃!

终于皇天不负有心人啊~~~~在今天我在Specs的站里看到他的导航也是如此,赶紧发问,终于在Spesc博主的帮助下解决了网站导航菜单下拉悬停的问题!

首先,你得在非jquery.1.4.2.min.js的JS文件中加上一段代码:

  1. var didScroll = false;
  2. jQuery(window).scroll(function() {
  3.     didScroll = true;
  4. });
  5. var y;
  6. setInterval(function() {
  7.     if ( didScroll ) {
  8.         didScroll = false;
  9.         y = jQuery(window).scrollTop();
  10.         //alert(y);
  11.         if(y > 75){
  12.             jQuery('#nav').addClass('fixed');
  13.         }else{
  14.             jQuery('#nav').removeClass('fixed');
  15.         }
  16.     }
  17. }, 50);

代码意思我就不解释了,说下需要注意的地方:

第一、#nav 改成你导航CSS的ID,比如喵呜阁网站的是.navbox

第二、75 表示下拉时经过75个像素会给#nav 附加 fixed 属性。修改为适合你网站的值就好。

然后接下来在你网站的css里边加上一段:

  1. .fixed{z-index:999;top:0;position:fixed;}

到这里就完成了网站导航的下拉悬停功能,不过看到很多网站悬停的导航都是透明的,不要着急,在 .fixed 属性里再添加 opacity:0.75; 其中可以自己调节0.75的值,看看有什么变化!