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 相关文章推荐
GWT中复制到剪贴板 js+flash实现复制 兼容性比较好
Mar 07 Javascript
JavaScript去掉空格的方法集合
Dec 28 Javascript
JQuery里选择超链接的实现代码
May 22 Javascript
基于OO的动画附加插件,可以实现弹跳、渐隐等动画效果 分享
Jun 24 Javascript
jQuery+css3动画属性制作猎豹浏览器宽屏banner焦点图
Mar 16 Javascript
jQuery 1.9.1源码分析系列(十三)之位置大小操作
Dec 02 Javascript
jquery延迟对象解析
Oct 26 Javascript
解析javascript图片懒加载与预加载的分析总结
Oct 27 Javascript
JavaScript实现的简单加密解密操作示例
Jun 01 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
微信小程序外卖选购页实现切换分类与数量加减功能案例
Jan 15 Javascript
addEventListener()和removeEventListener()追加事件和删除追加事件
Dec 04 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获取域名的google收录示例
2014/03/24 PHP
php递归实现无限分类的方法
2015/07/28 PHP
php实现产品加入购物车功能(1)
2020/07/23 PHP
PHP封装mysqli基于面向对象的mysql数据库操作类与用法示例
2019/02/25 PHP
基于jquery tab切换(防止页面刷新)
2012/05/23 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
table insertRow、deleteRow定义和用法总结
2014/05/14 Javascript
jquery实现翻动fadeIn显示的方法
2015/03/05 Javascript
ionic cordova一次上传多张图片(类似input file提交表单)的实现方法
2016/12/16 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
详解axios在vue中的简单配置与使用
2017/05/10 Javascript
node实现定时发送邮件的示例代码
2017/08/26 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
Python 自动补全(vim)
2014/11/30 Python
教你用Type Hint提高Python程序开发效率
2016/08/08 Python
Python实现可获取网易页面所有文本信息的网易网络爬虫功能示例
2018/01/15 Python
《与孩子一起学编程》python自测题
2018/05/27 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
在python里从协程返回一个值的示例
2019/02/19 Python
python实现图书借阅系统
2019/02/20 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
python检测服务器端口代码实例
2019/08/31 Python
python中删除某个元素的方法解析
2019/11/05 Python
Python模块_PyLibTiff读取tif文件的实例
2020/01/13 Python
python实现图像全景拼接
2020/03/27 Python
基于Python 的语音重采样函数解析
2020/07/06 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
毕业生机械建模求职信
2013/10/14 职场文书
国贸专业个人求职信分享
2013/12/04 职场文书
歌唱比赛获奖感言
2014/01/21 职场文书
领导班子党的群众路线对照检查材料
2014/09/25 职场文书
2014年环卫工作总结
2014/11/22 职场文书
Springboot如何同时装配两个相同类型数据库
2021/11/17 Java/Android