首页 > 代码库 > 哈佛大学官网图标下拉变小代码
哈佛大学官网图标下拉变小代码
<!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="textml; 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>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="textml; 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>
哈佛大学官网图标下拉变小代码
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。