我的问题出在script
底部的body
元素中。当您在pageTop
函数中声明menu
,yPos
和yScroll
变量时,该函数可以正常工作,但在外部声明时则不行。如果它们不属于函数并且是全局变量,那么我的function
是否仍然可以使用它们?当我尝试在函数外部定义变量时,我不明白为什么它不起作用。
这是代码
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
text-align: center;
}
#pagetop {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: #06C;
color: #FFF;
font-size: 23px;
padding-top: 50px;
transition: height 0.3s linear 0s, padding 0.3s linear 0s;
overflow: hidden;
}
#pagetop > #menu {
position: absolute;
bottom: 0px;
width: 100%;
background: #004A95;
height: 50px;
transition: height 0.3s linear 0s;
}
#wrapper {
margin-top: 230px;
}
</style>
</head>
<body>
<div id="pagetop">
Header
<div id="menu">Menu system</div>
</div>
<div id="wrapper">
<script>
for(i = 0; i < 40; i++)
{
document.write("<h2>dummy page content</h2>")
}
</script>
</div>
<script>
var pagetop = document.getElementById('pagetop');
var menu = document.getElementById('menu');
var yPos = window.pageYOffset;
window.addEventListener('scroll', yScroll);
function yScroll() {
if (yPos > 150) {
pagetop.style.height = '36px';
pagetop.style.paddingTop = '8px';
menu.style.height = '0px';
}
else {
pagetop.style.height = '120px';
pagetop.style.paddingTop = '50px';
menu.style.height = '50px';
}
}
</script>
</body>
</html>
答案 0 :(得分:2)
您的代码运行正常,但 yPos
仅在页面加载时设置一次,并始终保持0
。
要解决此问题,请在每次调用事件处理程序时,在yScroll
函数内阅读滚动位置:
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0px;
text-align: center;
}
#pagetop {
position: fixed;
top: 0px;
width: 100%;
height: 120px;
background: #06C;
color: #FFF;
font-size: 23px;
padding-top: 50px;
transition: height 0.3s linear 0s, padding 0.3s linear 0s;
overflow: hidden;
}
#pagetop > #menu {
position: absolute;
bottom: 0px;
width: 100%;
background: #004A95;
height: 50px;
transition: height 0.3s linear 0s;
}
#wrapper {
margin-top: 230px;
}
</style>
</head>
<body>
<div id="pagetop">
Header
<div id="menu">Menu system</div>
</div>
<div id="wrapper">
<script>
for (i = 0; i < 40; i++) {
document.write("<h2>dummy page content</h2>")
}
</script>
</div>
<script>
var pagetop = document.getElementById('pagetop');
var menu = document.getElementById('menu');
window.addEventListener('scroll', yScroll);
function yScroll() {
var yPos = window.pageYOffset;
if (yPos > 150) {
pagetop.style.height = '36px';
pagetop.style.paddingTop = '8px';
menu.style.height = '0px';
} else {
pagetop.style.height = '120px';
pagetop.style.paddingTop = '50px';
menu.style.height = '50px';
}
}
</script>
</body>
</html>
&#13;
答案 1 :(得分:0)
代码段有效:(http://codepen.io/f7o/pen/JKWKgb)
yPos
变量仅在文档加载时设置,在滚动时不再设置
答案 2 :(得分:0)
你的函数是识别全局变量,问题是只设置一次。您通过在函数范围之外初始化yPos
来完成基本操作:
var yPos = window.pageYOffset
是
var yPos = 0
这永远不会改变,因为你没有重新分配价值。因为yPos应该是动态的,所以需要将其移动到范围内(事实上,它甚至不需要声明)。其他变量在外面很好,因为它们不会改变。