jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
其实实现起来并不难,我们先把实现流程大致想一下,首先,如果导航在显示范围内,就不用做修改。当导航超出显示范围,也就是导航距离屏幕顶部的距离小于0的时候,我们要让它浮动在屏幕顶上,然后大于0的时候,进行一个复原操作,原理就是这么简单,大致看下效果图吧
代码如下:
$().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页脚代码里,如果遇到浮动导航宽度出问题了,就参考我刚才做的处理办法解决吧。
相关推荐
-
jquery实现的导航固定效果
jquery实现的导航固定效果 复制代码 代码如下: 1.jquery代码, .nav为导航的class$(function(){ $(window).scroll(function() { if($(window).scrollTop()>=250){ $(".nav").addClass("fixedNav"); }else{ $(".nav").removeClass("fixedNav"); } })
-
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
复制代码 代码如下: <section> <article class="left"> <p> </p> <ul> <li><a href="http://freejs.net/article_jquerywenzi_149.html" title="Ajax 动态加载内容">Ajax 动态加载内容</a></li> <li>
-
jQuery实现网页顶部固定导航效果代码
本文实例讲述了jQuery实现网页顶部固定导航效果代码.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
本文实例讲述了jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml
-
使用jQuery.Pin垂直滚动时固定导航
ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQuery.Pin,这个插件可在用来固定页面中的元素. http://webpop.github.io/jquery.pin/ 添加脚本 向页面中添加脚本,使用 jquery.pin 来固定导航.为了减少添加脚本的次数,可以将脚本添加到布局中,这样所有使用该局的页面都会应用到. 1. 布局组件 -> 默认
-
jQuery实现智能判断固定导航条或侧边栏的方法
本文实例讲述了jQuery实现智能判断固定导航条或侧边栏的方法.分享给大家供大家参考,具体如下: 这是一个jQuery智能判断固定DIV层的特效代码,通过这个jQuery智能代码,你可以设置导航栏.侧边栏.任何DIV层的固定显示:现在蓝叶的站就用的这个jQuery智能判断固定的导航条,要看演示的就请下拉页面滚动条,就会看到导航条固定了:使用这个代码需要在页面里引用jQuery库的JS文件,现在的网站一般都引用了jQuery库代码,如果没有那就打开你网站的模板,在页头或者页位加上<script s
-
jQuery实现仿百度帖吧头部固定导航效果
本文实例讲述了jQuery实现仿百度帖吧头部固定导航效果.分享给大家供大家参考.具体如下: 这里使用jquery实现网页上的头部固定,但不随滚动条滚动的效果,在百度贴吧里整理出来的网页特效,最开始的时候,固定条可以随滚动条拖动至网页顶部,但到达网页顶部后,再次拖动滚动条,头部并不滚动,其它的内容可以滚动,貌似在网上见的挺多的效果. 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&
-
jQuery导航条固定定位效果实例代码
实现效果图: 向下滑动时,导航栏固定 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } img{ display: block; margin: 0 auto; } img#search
-
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
其实实现起来并不难,我们先把实现流程大致想一下,首先,如果导航在显示范围内,就不用做修改.当导航超出显示范围,也就是导航距离屏幕顶部的距离小于0的时候,我们要让它浮动在屏幕顶上,然后大于0的时候,进行一个复原操作,原理就是这么简单,大致看下效果图吧 复制代码 代码如下: $().ready(function(){ //导航距离屏幕顶部距离 var _defautlTop = $("#navigator").offset().top - $(window).scrollTop(); //
-
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
本文实例讲述了jQuery实现鼠标悬停背景翻转的黑色导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现的鼠标悬停背景翻转的黑色导航菜单菜单,预览效果时左下角会提示错误,而且看不到效果,刷新一下就可以看到效果了:当然,在实际使用中,不会出现这样的问题. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-over-bg-cha-black-nav-menu/ 具体代码如下: <!DOCTYPE html
-
js/jquery控制页面动态加载数据 滑动滚动条自动加载事件的方法
页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空间,到底部时,会动态加载剩余的说说或者是日志 今天我们就来看看他们的实现思路和js控制动态加载的代码 下面的代码主要是控制滚动条下拉时的加载事件的 在下面代码说明出,写上你的操作即可,无论是加载图片还是加载记录数据 都可以 别忘了引用jquery类库 $(window).scroll(functi
-
jquery实现鼠标点击后展开列表内容的导航栏效果
本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航栏,鼠标点击后展开隐藏的列表内容,用来制作一个目录是最合适不过的选择.本例是锋利的jQeury中的一个实例,这是最终的优化版本,兼容性还示曾测试,在火狐的表现尚不知情,有兴趣的朋友可测试或修正. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-co
-
jQuery实现Flash效果上下翻动的中英文导航菜单代码
本文实例讲述了jQuery实现Flash效果上下翻动的中英文导航菜单代码.分享给大家供大家参考.具体如下: 这是一款jQuery实现Flash效果鼠标感应式的翻动导航菜单,支持中英文切换,所使用的jQuery类库版本为1.3.2. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-flash-style-sx-cha-chen-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//
-
基于jQuery实现以手风琴方式展开和折叠导航菜单
本章节分享一段代码实例,它实现了手风琴方式展开和折叠导航菜单效果. 代码实例如下: 代码实例如下: <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <meta name="author" content="http://www.jb51.net/" /> <title>我们</title> <sty
-
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
本文实例讲述了jQuery ui实现动感的圆角渐变网站导航菜单效果代码.分享给大家供大家参考.具体如下: 今天给大家分享一款基于jQuery UI的网站渐变导航菜单,可作为主导航,带渐入渐出效果,鼠标移过菜单后,菜单项上显示圆角背景,本地测试时,请注意引入的几个JS脚本文件,最好是保存到你本地,菜单兼容性也不错. 先来看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-ui-cicle-button-style-web-nav-codes
-
jQuery实现两款有动画功能的导航菜单代码
本文实例讲述了jQuery实现两款有动画功能的导航菜单代码.分享给大家供大家参考.具体如下: 这里介绍两个有动画功能的jQuery导航菜单,每个具备移动背景的效果,第二则是渐变背景效果,两个都不错,根据你的喜好选择了,菜单的风格和颜色自己修改一下就能用了. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-2-animate-style-nav-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "
-
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
导航条的使用很广,每个网站都会做出具有自己特色的导航条.最近特地去了解了各种类型的导航条,比如具有高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,甚至是具有摩擦运动动画的导航条(文字下面有横线)等.每种导航条都有自己的特色,比如高亮显示的导航条看起来比较简单,但是视觉效果还不错,具有动画效果的导航条在视觉上也是有很好的效果. 接下来将会一一介绍4种应用比较广的导航条,即:高亮显示的导航条,中英文互相切换的导航条,具有弹性动画的导航条,具有摩擦运动动画的导航条. 1.高亮显示的导航
随机推荐
- 使用 powershell 创建虚拟机
- JQUERY的AJAX请求缓存里的数据问题处理
- 浅谈javascript 面向对象编程
- Vue.js学习之过滤器详解
- Java 线程池ExecutorService详解及实例代码
- java实现向有序数组中插入一个元素实例
- JS实现微信里判断页面是否被分享成功的方法
- asp.net html控件的File控件实现多文件上传实例分享
- Adodb的十个实例(清晰版)
- 在Python的Flask框架中构建Web表单的教程
- 推荐ASP超速入门视频教程
- JavaScript生成随机数的4种自定义函数分享
- Python中用pycurl监控http响应时间脚本分享
- javascript轮播图算法
- Android实现获取未接来电和未读短信数量的方法
- ASP.NET jQuery 实例9 通过控件hyperlink实现返回顶部效果
- Jquery Easyui对话框组件Dialog使用详解(14)
- Android 中ScrollView与ListView冲突问题的解决办法
- javascript createElement()创建input不能设置name属性的解决方法
- Android 设置颜色的方法总结