跟随屏幕滚动的层

这是一个无缝的跟屏幕滚动的层效果，使用先请确认你已引用jquery-1.2.6.pack以上的JQuery版本.

另外：这段代码在IE6下效果不是很好,暂不推荐应用。期待兼容性更好的代码来替换掉此段。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <style>
 *{
    margin:0;
 padding:0;
 }
 #cssrain{
 background:#BBB;
 border:2px double #000000;
 position:fixed;
 left:0px;
 top:100px;
 height:300px;
 width:100px;
 }
 #cssrain2{
 background:#BBB;
 border:2px double #000000;
 position:fixed;
 right:0px;
 bottom:0px;
 height:200px;
 width:200px;
 padding:10px; /*添加padding*/
 }
 </style>
 <script src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.pack.js" type="text/javascript"></script>
 <script>
  $(document).ready(function(){
         /*FF和IE7可以通过position:fixed来定位，只有ie6需要动态设置高度.*/
   if($.browser.msie && $.browser.version == 6) {
    FollowDiv.follow();
   }
  });
  FollowDiv = {
   follow : function(){
    $('#cssrain').css('position','absolute');
    $(window).scroll(function(){
        var f_top = FollowDiv._getScroll()['scrollTop'] ;
     $('#cssrain').css( 'top' , f_top );
    });
   },
   _getScroll : function(){
    scrollTop = window.pageYOffset || document.documentElement.scrollTop || 0;
    return {scrollTop:scrollTop};
   }
   }
/*
程序解释：
document.body.scrollTop就是滚动条顶部到网页顶部的这段距离(当头部没有DOCTYPE声明时).
window.pageYOffset是NS专用属性，它的含义和IE下的document.body.scrollTop一样.

document.documentElement.scrollTop也是滚动条顶部到网页顶部的这段距离(当头部含有DOCTYPE声明时).
*/
 </script>
</head>
<body>
<div style="width:100%;height:600px;">test</div>

<div id="cssrain">
跟随屏幕滚动的层
</div>

<div id="cssrain2">
跟随屏幕滚动的层
</div>
<div style="width:100%;height:600px;">test</div>
</body>
</html>

[Ctrl+A 全部选择提示：你可先修改部分代码，再按运行]

One Response to “跟随屏幕滚动的层”

WordPress先生 Says:
六月 30th, 2009 at 10:00 上午
嗨，这是一条评论。
要删除一条评论，请先登录系统，查看这篇文章的评论，然后您可以看到编辑或者删除评论的选项。

春去花还在-CoLee★＂

跟随屏幕滚动的层

One Response to “跟随屏幕滚动的层”

Leave a Reply

Search

Categories

Monthly Archives

Links

合作链接

Tags

Meta