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及原生js获取select下拉框选中的值示例
Oct 25 Javascript
jquery中子元素和后代元素的区别示例介绍
Apr 02 Javascript
Javascript调用函数方法的几种方式介绍
Mar 20 Javascript
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
webpack优化的深入理解
Dec 10 Javascript
Angular6 用户自定义标签开发的实现方法
Jan 08 Javascript
vue组件 keep-alive 和 transition 使用详解
Oct 11 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
vue 重塑数组之修改数组指定index的值操作
Aug 09 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
星际争霸秘籍
2020/03/04 星际争霸
php 数组的一个悲剧?
2011/05/11 PHP
PHP 杂谈《重构-改善既有代码的设计》之一 重新组织你的函数
2012/04/09 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
php监测数据是否成功插入到Mysql数据库的方法
2016/11/25 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
yii2实现 "上一篇,下一篇" 功能的代码实例
2017/02/04 PHP
laravel 解决Eloquent ORM的save方法无法插入数据的问题
2019/10/21 PHP
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
js定时器(执行一次、重复执行)
2014/03/07 Javascript
jQuery中andSelf()方法用法实例
2015/01/08 Javascript
js实现右下角提示框的方法
2015/02/03 Javascript
整理JavaScript创建对象的八种方法
2015/11/03 Javascript
Google Maps基础及实例解析
2016/08/06 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
vuejs 制作背景淡入淡出切换动画的实例
2018/09/01 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
动态实现element ui的el-table某列数据不同样式的示例
2021/01/22 Javascript
[48:05]2018DOTA2亚洲邀请赛 3.31 小组赛 B组 VGJ.T vs VP
2018/03/31 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
wxPython事件驱动实例详解
2014/09/28 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
pygame实现五子棋游戏
2019/10/29 Python
详解Python list和numpy array的存储和读取方法
2019/11/06 Python
matplotlib绘制多子图共享鼠标光标的方法示例
2021/01/08 Python
C++面试题目
2013/06/25 面试题
周鸿祎:教你写创业计划书
2013/12/30 职场文书
银行开业庆典方案
2014/02/06 职场文书
班风学风建设方案
2014/05/06 职场文书
2014年秋季开学演讲稿
2014/05/24 职场文书
会计岗位说明书
2014/07/29 职场文书
咖啡店创业计划书
2014/08/15 职场文书
社会工作专业自荐信
2014/09/26 职场文书
不同意离婚代理词
2015/05/23 职场文书
教您怎么制定西餐厅运营方案 ?
2019/07/05 职场文书