当导航在显示范围外浮动在窗口顶部随窗口变化位置发生变化
2011-11-22 11:55
375 查看
刚做的一导航,写出来方便以后阅读学习,参考资料/article/4775460.html只是在他的基础上做些优化,达到自己想要的效果..
<script type="text/javascript">
$(function(){
//导航距离屏幕顶部距离
var _defautlTop = $("#nav").offset().top;
//获取左边的距离,用当前窗口的距离减去导航的宽再除以二
function leftWidth(){
var num=$('#nav').width();//ie6受用
var winWidth=$(window).width();
var left=(winWidth-num)/2;
return left;
}
//导航默认样式记录,还原初始样式时候需要
var _position = $("#nav").css('position');
var _top = $("#nav").css('top');
var _left = $("#nav").css('left');
var _zIndex = $("#nav").css('z-index');
//当文档窗口改变大小时触发
$(window).resize(function(){
if($.browser.msie && $.browser.version=="6.0"){ //防止ie6bug <在小窗口变大时,距离头部的位置错位>
$("#nav").css({'top':eval(document.documentElement.scrollTop),'left':leftWidth()});
}else{
$("#nav").css({'left':leftWidth()});
}
});
//鼠标滚动事件
$(window).scroll(function(){
if($(this).scrollTop() > _defautlTop){
//var _defautlLeft = $("#nav").offset().left;导航距离屏幕左侧距离
//IE6不认识position:fixed,单独用position:absolute模拟
if($.browser.msie && $.browser.version=="6.0"){
$("#nav").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':leftWidth(),'z-index':99999});
//防止出现抖动
$("html,body").css({'background-image':'url(images/bg.jpg)','background-attachment':'fixed'});
}else{
$("#nav").css({'position':'fixed','top':0,'left':leftWidth(),'z-index':99999});
}
}else{
$("#nav").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex});
}
});})
</script>
<script type="text/javascript">
$(function(){
//导航距离屏幕顶部距离
var _defautlTop = $("#nav").offset().top;
//获取左边的距离,用当前窗口的距离减去导航的宽再除以二
function leftWidth(){
var num=$('#nav').width();//ie6受用
var winWidth=$(window).width();
var left=(winWidth-num)/2;
return left;
}
//导航默认样式记录,还原初始样式时候需要
var _position = $("#nav").css('position');
var _top = $("#nav").css('top');
var _left = $("#nav").css('left');
var _zIndex = $("#nav").css('z-index');
//当文档窗口改变大小时触发
$(window).resize(function(){
if($.browser.msie && $.browser.version=="6.0"){ //防止ie6bug <在小窗口变大时,距离头部的位置错位>
$("#nav").css({'top':eval(document.documentElement.scrollTop),'left':leftWidth()});
}else{
$("#nav").css({'left':leftWidth()});
}
});
//鼠标滚动事件
$(window).scroll(function(){
if($(this).scrollTop() > _defautlTop){
//var _defautlLeft = $("#nav").offset().left;导航距离屏幕左侧距离
//IE6不认识position:fixed,单独用position:absolute模拟
if($.browser.msie && $.browser.version=="6.0"){
$("#nav").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':leftWidth(),'z-index':99999});
//防止出现抖动
$("html,body").css({'background-image':'url(images/bg.jpg)','background-attachment':'fixed'});
}else{
$("#nav").css({'position':'fixed','top':0,'left':leftWidth(),'z-index':99999});
}
}else{
$("#nav").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex});
}
});})
</script>
相关文章推荐
- 空间数据范围发生变化后如何更新数据的显示范围
- jquery左边浮动到一定位置显示返回顶部代码
- jquery左边浮动到一定位置时显示返回顶部按钮
- jquery左边浮动到一定位置时显示返回顶部按钮
- float 浮动 div 不随浏览器分辨率 大小而位置发生变化
- 浮动的div无论窗口大小变化都能居中显示的js
- HTML 获取当前标签在页面的位置,并且把其他的浮动窗口显示过来
- 《转》QT界面怎么使控件随窗口大小变化一直居中显示
- scrollview嵌套listview运行后最先显示出来的位置不在顶部而是中间问题
- C#指定窗口显示位置的方法
- 用JavaScript=显示DIV=定时=在一定范围内浮动层
- 猎豹MFC--窗口操作--最大化 最小化还原 关闭 大小位置 居中显示 图标 标题
- MKMapView上获取自身当前位置并将地图显示范围控制在自身位置周围
- jquery+css实现导航浮动并全宽显示效果教程
- 黑马程序员——List的设置值,跟变量的位置关系(变量范围的变化导致结果差别很大)
- CSS 浮动应用实例,列表横向显示(导航)
- scrollview嵌套listview运行后最先显示出来的位置不在顶部而是中间问题
- 设置qt中窗口的显示范围
- mfc动态改变对话框窗口大小和显示位置