为什么这些DOM对象必须找个变量给它存起来才能触发else？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#main {
position: relative;
}
#top {
width: 1423px;
height: 168px;
margin: 0 auto;
}
#nav {
width: 1423px;
height: 168px;
margin: 0 auto;
}
#body {
width: 1001px;
height: 2734px;
margin: 0 auto;
}
.fixed {
position: fixed;
top: 0;
left: 240px;
}
#btn {
width: 40px;
height: 40px;
position: fixed;
display: none;
right: 300px;
bottom: 30px;
background: url(img/goTop.jpg) no-repeat left top;
}
#btn:hover {
background: url(img/goTop.jpg) no-repeat 0 -39px;
}
</style>
</head>
<body>
<div id="main">
<div id="top">
<img src="img/top.png" />
</div>
<div id="nav">
<img src="img/nav.png" />
</div>
<div id="body">
<img src="img/main.png" />
</div>
</div>
<a id="btn" href="javascript:;"></a>
<script src="js move/scrollTop.js"></script>
<script>
var oNav = document.getElementById("nav");
var oBtn=document.getElementById("btn");
var navTop = oNav.offsetTop;
window.onscroll = function() {
var osTop = document.documentElement.scrollTop || document.body.scrollTop;
var clHeight=document.documentElement.clientHeight||document.body.clientHeight
if(osTop >= navTop) {
oNav.className = "fixed"
} else {
oNav.className = ""
}
if(osTop>=clHeight){
oBtn.style.display="block";
}else{
oBtn.style.display="none";
}
}
</script>
</body>
</html>
