DIV 跟随屏幕滚动

最新推荐文章于 2023-06-09 20:01:24 发布

make19830723

最新推荐文章于 2023-06-09 20:01:24 发布

阅读量2.2k

点赞数 1

文章标签： div function xhtml html border 测试

<!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>  
    <title></title>   
    <script src="jquery-1.7.1.min.js" type="text/javascript"></script>   
     <style type="text/css">  
        #test  
        {  
            border: 1px #8aae44 solid;  
            background-color: #eee;  
            padding:20px 10px 20px 10px;  
            margin: 0 0 0 0px;   
            position: absolute;  
            cursor: pointer;    
        }  
        p{  
        color:GrayText;  
        font-size:22pt;  
        font-family:华文彩云;  
        }  
    </style>   
      
 <script type="text/javascript">  
     $(document).ready(function() {  
         //滚动条事件  
         $(window).scroll(function() {  
             //获取窗口一半的高度+滚动条高度  
             var offsetTop = $(window).scrollTop() + $(window).height() / 2;  
             //改变样式 显示   
             $("#test").show();  
             //改变样式 top 高度  
             $("#test").animate({ top: offsetTop + "px" }, { duration: 600, queue: false });  
             //改变left 位置  
             $("#test").animate({ left: $(window).width() - 40 + "px" }, { duration: 600, queue: false });  
         });  
  
         //讲故事 填充测试数据  
         for (var i = 1; i < 999; i++) {  
             $("#content").append("<h2 >" + i + "个和尚！！！</h2> ");  
         }  
         $("#content").append("<h2>" + i + "</h2> 那么多和尚在干吗呢 ？ 预知后事如何，君请听下回分解！！！");  
  
         //返回顶部  
         $("#test").click(function() {  
             $("#test").animate({ top: "0px" }, { duration: 600, queue: false });  
             $(window).scrollTop(0, 0);  
         });  
  
     });  
   
 </script>  
</head>  
<body style="height:3000px;text-align:center">     
  
<div id="test" style="display:none" >顶<br />部</div>   
  
<p >从前有个小孩喜欢听故事  ！</p>  
<p style="color:Gray">故事大概是这样的 从前有座山 山上有很多和尚 ！</p>   
  
<div id="content" style="width:80%;text-align:center" ></div>   
  
</body>  
</html>

make19830723

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DIV 跟随屏幕滚动

#test { border: 1px #8aae44 solid; background-color: #eee; padding:20px 10px 20px 10px; margin: 0 0 0 0px; position: ab
复制链接

扫一扫