首页 > 代码库 > 哈佛大学官网图标下拉变小代码

哈佛大学官网图标下拉变小代码

2024-08-14 16:12:57   220人阅读

 <!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技术分享ml; charset=utf-8" />
<title>无标题文档</title>

<style type="text/css">
*{ margin:0px auto; padding:0px; font-family:微软雅黑; font-size:14px;}

#aa{ width:100%; height:50px; background-color:#66C; margin-top:0px;}
</style>

</head>
<body>

<div id="aa">

</div>

<div style="width:100px; height:1000px"></div>

</body>
<script type="text/javascript">

//取出DIV相对于页面上方的距离
var p = document.getElementById("aa").offsetTop;

//窗体的滚动事件
 window.onscroll = function () {
  
  //取出当前页面的滚动距离
  var t = document.documentElement.scrollTop || document.body.scrollTop;
  if(t>p)
  {
  document.getElementById("aa").style.position = "fixed";
  document.getElementById("aa").style.width = "500px";
  document.getElementById("aa").style.height = "20px";
  }
  else if(t==p)
  {
  document.getElementById("aa").style.position = "fixed";
  document.getElementById("aa").style.width = "100%";
  document.getElementById("aa").style.height = "50px";
  }
 
 }

</script>
<技术分享html>

















哈佛大学官网图标下拉变小代码


联系
我们