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/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<style type="text/css">
.clear{ clear:both;}
.main{ width:600px; margin:0 auto;}
.left{ width:395px; float:left; background:#066; height:1000px; text-align:center; font:bold 20px/30px Arial, Helvetica, sans-serif; color:#FFF;}
.right{ width:195px; float:right; background:#C36; height:300px;}
#fixed{ position:fixed; background:#000; font:bold 26px/56px "微软雅黑"; color:#FFF; text-align:center; margin:0 auto; width:195px;}
</style>
</head>

<body>
<div class="main">
 <div class="left">
  1<br />
  2<br />
  3<br />
  4<br />
  5<br />
  6<br />
  7<br />
  8<br />
  9<br />
  10<br />
 </div>
 <div class="right">
  <div id="fixed">我不懂</div>
 </div>
 <div class="clear"></div>
 <script>
        $(function(){
            $(window).scroll(function(){
                if($(document).scrollTop()>10){
                    $('#fixed').css('top','0');
                } else{
                    var _top = 10 -$(document).scrollTop() ;
                    $("#fixed").css("top",_top+'px');
                }    
            })
        })
 </script>
</div>
</body>
</html>

 

posted @ 2013-12-14 11:43  rightzhao  阅读(876)  评论(0)  编辑  收藏  举报