zoukankan      html  css  js  c++  java
  • Javascript 保持浮动位置

    <!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 content="zh-cn" http-equiv="Content-Language" />
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>无标题 1</title>
    <style type="text/css">
    body{
    	margin:0;
    	padding:0;
    }
    .middle
    {
    	100%;
    	height:30px;
    	border:1px #ccc solid;
    	background:#f3f3f3;
    	text-align:center;
    	font-size:12px;
    	line-height:30px;
    	position:absolute;
    	top:30px;
    }
    </style>
    </head>
    
    <body>
    <div class="middle" id="floatDiv">一直在中间,从不曾改变</div>
    <script type="text/javascript">
    <!--
    function setVCenter()
    {
    	var obj = document.getElementById("floatDiv");
    	var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;
    	var iT = 300 + scrollTop ;
    	obj.style.top = iT + "px";
    	
    }
    setVCenter();
    window.onscroll = function(){
    	setVCenter();
    };
    //-->
    </script>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    <p>1 </p>
    
    </body>
    
    </html>
    

      

  • 相关阅读:
    新手入门贴之基于 python 语言的接口自动化 demo 小实战
    记新人从 excel 文件中读取字典数据踩的一个坑
    接口自动化 之 unittest+ddt+openpyxl 综合
    接口自动化之unittest+ddt
    接口自动化之unittest初探
    python之类与对象(5)
    python之类与对象(4)
    python之类与对象(3)
    python之类与对象(2)
    传智播客JavaWeb day01 快捷键、XML
  • 原文地址:https://www.cnblogs.com/blackice/p/2851062.html
Copyright © 2011-2022 走看看