井井客

搜索

JQ元素移动到显示区域顶部时保持浮动

当滚动条下滑时,将某个元素移动到显示区域后,继续向下滑动时,将元素停留在顶部位置浮动的JQ效果,主体代码是从网上找的,在测试的时候遇到些兼容问题所以有做一些修改。

JQ元素移动到显示区域顶部时保持浮动

可能是Jq版本不一样,这边用的是1.8.2,做的时候有几个值,在Ie7-IE8,Ie6上面显示的不一致,所以稍做修改(最终只测试了Ie6+,谷歌火狐),整体测试代码如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>testing</title>
<script type="text/javascript" src="http://res.xianhuozhijia.com/js/jquery-1.8.2.min.js"></script>
<style>
body,div { padding:0; margin:0;}
.head,.foot { height: 300px; background:#e8e8e8;}
.main { width:1000px; height:1000px; margin:0 auto; padding:20px; background: #ddd;}
#float { height:50px; width:980px; border:10px solid #39F; background:#f00;}
</style>
</head>
<body>
<div class='head'>头</div>
<div class='main'>
    <div id='float'>浮动</div>
</div>
<div class='foot'>底</div>
<script>
	$.fn.smartfloat = function(){
		var position = function(ele){
			var top = ele.position().top,
				pos = ele.css('position'),
				atop = ele.css('top');
			$(window).scroll(function(){
				var scrolls = document.body.scrollTop,
					scrollc = $(this).scrollTop();
				if(!scrollc==0 && scrolls == 0) scrolls=scrollc;
				if(scrolls > top){
					if(scrollc==0){
						ele.css({
						'position':'relative',
						'top':scrolls-top
						});
					}else{
						ele.css({
						'position':'fixed',
						'top':'0px'
						});
					}
				}else{
					ele.css({
						'position':pos,
						'top':atop
					});
				}
			});
		}
		return $(this).each(function(){
			position($(this));
		});
	}
	$('#float').smartfloat();
</script>
</body>
</html>

这样效果就好了。因为代码比较简短,还是比较好理解的。我自己读下来,感觉似有似无get到新技能点了。

文章TAG:JQ

作者:井井客整理来源:互联网
本文标题:JQ元素移动到显示区域顶部时保持浮动
本文链接:/c/14126.html

上一篇:IE7中fixed位置偏移 神奇的BUG!
下一篇:chrome12个很有用的浏览器命令

文章分类

相关阅读

随便看看