我们先写实例，然后可能需要在封装为插件，最后做更高级的处理！
封装插件基础学习 http://my.oschina.net/u/2352644/blog/487688
1-7实例地址 http://my.oschina.net/u/2352644/blog/490827
8-17实例地址 http://my.oschina.net/u/2352644/blog/491933
18-23实例地址 http://my.oschina.net/u/2352644/blog/497003
效果目录：
24.页面结构滚动时相对窗口定位
25.返回顶部
24.页面结构滚动时相对窗口定位
原理：获取元素相对页面的top值做判断标准，不断监听窗口滚动条的位置，超过这个top值，加入position:fixed属性，实现窗口固定，小于这个top值移除属性，恢复为默认页面位置（针对ie6对fixed的不支持问题，写入css的hack：position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop)); 利用支持的absolute和对top取值采用的表达式方法）
代码：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
var i=0;
var objtop=$("#fixa").offset().top;
$(window).scroll(function(){
i=$(window).scrollTop();
if(i>=objtop)
{
$("#fixa").addClass(‘se‘)
}else
{
$("#fixa").removeClass(‘se‘)
}
})
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.fou{ width: 1000px; height: 2000px; background: #faa;margin: 0 auto;}
/*抖动问题ie6*/
*html,*html body{background-image:url(about:blank);background-attachment:fixed;}
/*让position:fixed在IE6下可用! */
div.se{position:fixed;bottom:auto;top:0px;background: #000; color: #fff; width: 1000px;height: 30px;}
/*xxx{position:fixed;bottom:auto;top:0px;}*//* 头部固定 */
/*xxx{position:fixed;bottom:0px;top:auto;}*//* 底部固定 */
/*xxx{position:fixed;right:auto;left:0px;}*//* 左侧固定 */
/*xxx{position:fixed;right:0px;left:auto;}*//* 右侧固定 */
/* IE6 头部固定 */
*html div.se{position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop));}
/* IE6 右侧固定 */
/** html .fixed-right {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft+document.documentElement.clientWidth-this.offsetWidth)-(parseInt(this.currentStyle.marginLeft,10)||0)-(parseInt(this.currentStyle.marginRight,10)||0));}
*//* IE6 底部固定 */
/** html .fixed-bottom {position:absolute;bottom:auto;top:expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||0)-(parseInt(this.currentStyle.marginBottom,10)||0)));}*/
/* IE6 左侧固定 */
/** html .fixed-left {position:absolute;right:auto;left:expression(eval(document.documentElement.scrollLeft));}*/
#fixa{background:#000;height: 30px;color: #fff;}
</style>
</head>
<body>
<div class="fou">
<div style="height:400px;">124564</div>
<div id="fixa">
<div class="ddd">
<span>111</span>
<span>222</span>
<span>3333</span>
<span>4444</span>
<span>5555</span>
</div>
</div>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
1111111111111111<br><br><br><br><br><br>
</div>
</body>
</html>
25.返回顶部
原理：返回顶部就是将html元素的scrollTop设置为0；我们可以通过jq的动画去设置，实现缓冲效果（对滚动值的赋值我们是对html元素，获取值是对window对象）
代码：
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jq插件简单开发</title>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function(){
//start
$(".gotop0").click(function(){
$(‘html‘).scrollTop(0);
});
$(".gotop").click(function(){
$(‘html‘).animate({
scrollTop:0
},500);
});
$(".gotop2").click(function(){
$(‘html‘).animate({
scrollTop:0
},500);
});
var wheight=$(window).height()/2;
if($(window).scrollTop()>=wheight){
$(".gotop2").fadeIn();
}else{
$(".gotop2").fadeOut();
};
$(window).scroll(function(){
if($(window).scrollTop()>=wheight){
$(".gotop2").fadeIn();
}else{
$(".gotop2").fadeOut();
};
});
//end
});
</script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{ height: 100%; width: 100%; position: relative;}
.gotop0{ height:100px; width:100px; right:0px; bottom:350px; position:fixed; background:#09F;}
.gotop{ height:100px; width:100px; right:0px; bottom:200px; position:fixed; background:#09F;}
.gotop2{ height:100px; width:100px; right:0px; bottom:50px; position:fixed; background:#09F; display:none;}
</style>
</head>
<body>
<div style="height:2000px;">
</div>
<span class="gotop0">返回顶部1</span>
<span class="gotop">返回顶部2</span>
<span class="gotop2">返回顶部3</span>
</body>
</html>
时间： 2024-10-07 01:47:18