jquery实现的让超出显示范围外的导航自动固定屏幕最顶上


Posted in Javascript onSeptember 22, 2011

其实实现起来并不难,我们先把实现流程大致想一下,首先,如果导航在显示范围内,就不用做修改。当导航超出显示范围,也就是导航距离屏幕顶部的距离小于0的时候,我们要让它浮动在屏幕顶上,然后大于0的时候,进行一个复原操作,原理就是这么简单,大致看下效果图吧
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上

$().ready(function(){ 
//导航距离屏幕顶部距离 
var _defautlTop = $("#navigator").offset().top - $(window).scrollTop(); 
//导航距离屏幕左侧距离 
var _defautlLeft = $("#navigator").offset().left - $(window).scrollLeft(); 
//导航默认样式记录,还原初始样式时候需要 
var _position = $("#navigator").css('position'); 
var _top = $("#navigator").css('top'); 
var _left = $("#navigator").css('left'); 
var _zIndex = $("#navigator").css('z-index'); 
//鼠标滚动事件 
$(window).scroll(function(){ 
if($(this).scrollTop() > _defautlTop){ 
//IE6不认识position:fixed,单独用position:absolute模拟 
if($.browser.msie && $.browser.version=="6.0"){ 
$("#top").css({'position':'absolute','top':eval(document.documentElement.scrollTop),'left':_defautlLeft,'z-index':99999}); 
//防止出现抖动 
$("html,body").css({'background-image':'url(about:blank)','background-attachment':'fixed'}); 
}else{ 
$("#navigator").css({'position':'fixed','top':0,'left':_defautlLeft,'z-index':99999}); 
} 
}else{ 
$("#navigator").css({'position':_position,'top':_top,'left':_left,'z-index':_zIndex}); 
} 
}); 
});

没有太多好讲的,需要注意的一点就是,IE6不认识position:fixed,需要用position:absolute去模拟,然后实时计算出top的值,另外需要给html和body加两个样式,防止滚动的时候出现抖动,具体可以了解《完美解决IE6不支持position:fixed的bug》。

另外需要注意的一点就是,导航的宽度必须是固定值,不能是auto或者100%因为fixed和absolute都不认识,当然你也可以手动获取到导航的宽度,然后写到浮动导航样式里,不过有个前提,导航原先样式里不能有:position:relative,情况可能比较多,最简单的方法还是把导航宽度定死。

以上代码可以复制复制到后台设置的HTML页脚代码里,如果遇到浮动导航宽度出问题了,就参考我刚才做的处理办法解决吧。

Javascript 相关文章推荐
jQuery入门知识简介
Mar 04 Javascript
javascript与CSS复习(二)
Jun 29 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
JavaScript中的关键字"VAR"使用详解 分享
Jul 31 Javascript
jquery 循环显示div的示例代码
Oct 18 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
JS中获取函数调用链所有参数的方法
May 07 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
浅谈angular.js跨域post解决方案
Aug 30 Javascript
angularJS自定义directive之带参方法传递详解
Oct 09 Javascript
JS实现点星星消除小游戏
Mar 24 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 Javascript
javascript代码编写需要注意的7个小细节小结
Sep 21 #Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 #Javascript
基于jquery的一个拖拽到指定区域内的效果
Sep 21 #Javascript
关于onScroll事件在IE6下每次滚动触发三次bug说明
Sep 21 #Javascript
分别用marquee和div+js实现首尾相连循环滚动效果,仅3行代码
Sep 21 #Javascript
Dom操作之兼容技巧分享
Sep 20 #Javascript
js获取图片大小的函数代码
Sep 20 #Javascript
You might like
需要发散思维学习PHP
2009/06/29 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
php中get_meta_tags()、CURL与user-agent用法分析
2014/12/16 PHP
PHP删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
php批量修改表结构实例
2017/05/24 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Jquery 基础学习笔记
2009/05/29 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
Javascript中的Callback方法浅析
2015/03/15 Javascript
jQuery实现点击后高亮背景固定显示的菜单效果【附demo源码下载】
2016/09/21 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
Vue.js第二天学习笔记(vue-router)
2016/12/01 Javascript
深入理解javascript函数参数与闭包
2016/12/12 Javascript
angular使用post、get向后台传参的问题实例
2017/05/27 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
2018/05/23 Javascript
Vue+mui实现图片的本地缓存示例代码
2018/05/24 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
Python中Numpy包的安装与使用方法简明教程
2018/07/03 Python
python读取Excel实例详解
2018/08/17 Python
Numpy对数组的操作:创建、变形(升降维等)、计算、取值、复制、分割、合并
2019/08/28 Python
Python中断多重循环的思路总结
2019/10/04 Python
python orm 框架中sqlalchemy用法实例详解
2020/02/02 Python
Tkinter中复选菜单是否被选中的判断与设置方式
2020/03/04 Python
Python实现验证码识别
2020/06/15 Python
基于HTML5 Canvas 实现商场监控实例详解
2017/11/20 HTML / CSS
SheIn俄罗斯:时尚女装网上商店
2017/02/28 全球购物
澳大利亚电商Catch新西兰站:Catch.co.nz
2020/05/30 全球购物
2014年反腐倡廉工作总结
2014/12/05 职场文书
趣味运动会加油词
2015/07/18 职场文书
Java 将PPT幻灯片转为HTML文件的实现思路
2021/06/11 Java/Android
MySQL高速缓存启动方法及参数详解(query_cache_size)
2021/07/01 MySQL
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript