固定div实现,以及问题 >> document.body.scrollTop的值总为零的解决办法

最新推荐文章于 2024-09-14 18:52:56 发布

futurebp

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量739

点赞数

分类专栏：临时文件文章标签： div function javascript border table 生活

本文链接：https://blog.csdn.net/onecooper/article/details/6793821

版权

临时文件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

固定的div，下面的代码紧挨着<body>下面放上

<span id="bar" style="position:absolute; left: 0px; top: 0px; width: 100%; height:23px; zIndex:9" >  
	<table border='2' width='100%' height='30px' bordercolor='#FFFFFF'> 
		<tr align="left">  
			<td width='100%' height='30px' bgcolor='#E0F2FF'> 
				<a href="#" οnclick="showHide()">处理流程</a>        
				<a href="#" οnclick="goback()">返回</a>        
				<a href="#" οnclick="impthis('${feedBackService.planid}')">导出本月计划</a>        
				<span id="imp"></span>
			</td> 
		</tr>   
	</table>   
</span> 
<script language="javascript"> 
$(document).ready(function(){
	fix();
});

function fix(){
	star();
}

window.onscroll = function(){
	star();
};

function star(){
	var nome=navigator.appName; 
	if(nome=='Netscape'){ 
		var a=document.documentElement.scrollTop+document.getElementById("bar").offsetHeight-20;
	     document.getElementById("bar").style.top = a  + 'px';
	} else{
		 var a=document.documentElement.scrollTop+document.all.bar.offsetHeight-20;
	     bar.style.top = a; 
	}
}
</script>
<br /><br /><br />

实例：

<html>
<title>JS实现的始终固定在页面底部的菜单丨芯晴网页特效</title> 
<head> 
<script language="javascript"> 
<!-- 
function stat(){ 
var a = pageYOffset+window.innerHeight-document.bar.document.height-0 
document.bar.top = a 
setTimeout('stat()',2) 
} 
function fix(){ 
	
nome=navigator.appName 
if(nome=='Netscape'){ 
stat() 
} 
else{ 
var a=document.body.scrollTop+document.body.clientHeight-document.all.bar.offsetHeight+0 
alert("aaaaa:"+document.body.scrollTop);
alert("document.body.clientHeight:"+document.body.clientHeight);
alert("document.all.bar.offsetHeight:"+document.all.bar.offsetHeight);
bar.style.top = a 
}} 
//--> 
</script> 
</head> 
<body onLoad="fix()" onScroll="fix()" onResize="fix()"> 
<span id="bar" style="position:absolute; left:68px; top:455px; width:614px; height:45px; z-index:9" >  
<table border="1" hspace="1" cellpadding="1" bordercolor="#000000" bgcolor="#FFFFFF"> 
<tr align="center">  
<td width="190"> <a>网页特效</a></td> 
<td width="147"> <a>源码下载</a></td> 
<td width="96"> <a>链接交换</a></td>   
<td width="158"> <a>生活常识</a>    
</td>   
</tr>   
</table>   
</span>
<br><br><br><br><br><br><br> 
<form>
<div style="height:100px;background-color: green;">
</div>
<div style="height:100px;background-color: green;">
</div>
<div style="height:100px;background-color: green;">
</div>
<div style="height:100px;background-color: green;">
</div>
<div style="height:100px;background-color: green;">
</div>
  <br><br><br><br><br><br><br><br>  

</form>

</body> 
</html>