jquery 导航条滚动时固定在头部

分类:jquery实践

 

//-------------------获取滚动条距离顶部高度-----------------------------------------
function getBoyTop() 
{
	var bodyTop = 0;
	if (typeof window.pageYOffset != 'undefined') {
		bodyTop = window.pageYOffset
	} else if (typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat') {
		bodyTop = document.documentElement.scrollTop
	} else if (typeof document.body != 'undefined') {
		bodyTop = document.body.scrollTop
	}
	return bodyTop;
} 
$(function(){
//--------------------------导航条图片切换------------------------------------------		   
   $(".nav > ul >li").hover(function(i){$(this).find(".submenu").fadeIn(500);$(this).children("a:first").css("background-image","url(/resources/images/nav/nav"+parseInt($(this).index()+1)+"_02.png)");},function(){$(this).find(".submenu").fadeOut(100);$(this).children("a:first").css("background-image","url(/resources/images/nav/nav"+parseInt($(this).index()+1)+"_01.png)");});
//--------------------------导航条菜单悬浮效果------------------------------------    
   var obj_nav_reference = $(".top");
   var obj_nav = $(".nav");
   var nav_top = obj_nav.offset().top;
   var nav_left = function(){return parseInt(obj_nav_reference.offset().left);};
   $(window).scroll(function(){
		  var body_top = parseInt(getBoyTop());	
		  var left = nav_left();
	      if(body_top>=nav_top)
		  {
			  obj_nav.css({"position":"fixed","top":"0px","left":nav_left()+"px"});
			  if($.browser.msie){
		           if($.browser.version == "6.0"){ 
							   obj_nav.css({"left":left+"px","top":body_top+"px","position":"absolute","z-index":"99999"});
		                                         }
			                 }
		  }
		  else
		  {obj_nav.css({"position":"absolute","top":nav_top+"px","left":left+"px"});}
	 });
     $(window).resize(function(){ 
		obj_nav.css({"left":nav_left()+"px"});
	});
//-------------------------------------------------------------------------------- 	 
});

 

本文链接: jquery 导航条滚动时固定在头部
版权所有:布士收藏夹在网络收集,如有侵犯你的权利, 请联系QQ:641868752。

评论

发表评论

*

* (显示gravatar头像)

Ctrl+Enter快捷回复

© 2014 布士收藏夹 all rights reserved.