开发者社区> 橘子红了呐> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

jquery实现让导航超出显示范围外时自动贴在屏幕最顶上

简介:
+关注继续查看

 经常会遇到这样的情况,当页面展示内容过长时,想点导航切换栏目,就得把滚动条拉回到顶上,这样操作总不太人性化,能不能让导航超出显示范围外时自动贴在屏幕最顶上呢?答案肯定是能的。如果不太明白,把滚动条拉到下面点,看下我博客是效果就明白了。

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

$().ready(function(){
	//导航距离屏幕顶部距离
	var _defautlTop = $("#navigator").offset().top;//避免出现下面16楼所说的情况
	//导航距离屏幕左侧距离
	var _defautlLeft = $("#navigator").offset().left;
	//导航默认样式记录,还原初始样式时候需要
	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页脚代码里,如果遇到浮动导航宽度出问题了,就参考我刚才做的处理办法解决吧。

  PS:发现一篇相关文章《如何将页脚固定在页面底部》,也是比较实用的功能。



   本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2011/09/21/2184563.html,如需转载请自行联系原作者



版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
jQuery遮罩插件jQuery.blockUI.js简介
      本文链接:http://bookshadow.com/weblog/2014/09/26/jquery-blockui-js-introduction/
890 0
Jquery上传插件Uploadify无刷新上传文件
Uploadify v3.2.1  上传图片并预览 前端JSP: <script type="text/javascript">                             $(function() {                 $("#upload_org_code").uploadify({                     'height'    
2066 0
推荐15款响应式的 jQuery Lightbox 插件
  利用现代 Web 技术,网络变得越来越轻巧与。模态框是突出展现内容的重要形式,能够让用户聚焦到重要的内容上去。在这个列表中,我们编制了15款响应式的 jQuery 灯箱库,这将有助于开发人员创建和设计美观的网站。
1338 0
能跨域和跨浏览器的flashcookie for jquery插件
对于写网站时需要跨域和跨浏览器的可以看看这个。 引入jquery  和 swfstore.min.js 就可以了,蛮简单好用的,会jquery基础就可以咯。   mySwfStore.set('myKey', '值'); //设置flashcookie mySwfStore.get('myKey'); //读取flashcookie 还有清除等命令在例子里,大家可以自己看哦。
886 0
文章
问答
文章排行榜
最热
最新
相关课程
更多
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载