My issue is in the script element at the bottom of the body. The function works fine when you declare the pageTop, menu and yPos variables inside the yScroll function but not when it's outside. If they are outside the function and are global variables, shouldn't my function still be able to use them? I don't understand why it doesn't work when I try to define the variables outside the function.
我的问题是在正文底部的脚本元素中。当您在yScroll函数内声明pageTop,menu和yPos变量时,该函数可以正常工作,但在外部时则不能。如果它们在函数之外并且是全局变量,那么我的函数是否仍然不能使用它们?当我尝试在函数外部定义变量时,我不明白为什么它不起作用。
Here is the code
这是代码
<!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>
3 个解决方案
#1
2
Your code is working fine, except that yPos is only set once at page load and will always stay 0.
您的代码工作正常,但yPos仅在页面加载时设置一次,并且始终保持为0。
To resolve this, read the scroll position each time the event handler is called, inside your yScroll function:
要解决此问题,请在每次调用事件处理程序时,在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>#2
0
snippet works: (http://codepen.io/f7o/pen/JKWKgb)
片段工作原理:(http://codepen.io/f7o/pen/JKWKgb)
yPos variable is only set on document load, and never again on scrolling
yPos变量仅在文档加载时设置,在滚动时不再设置
#3
0
Your function is recognising the global variables, the issue is the are only only set once. What you're basically doing by initialising yPos outside the function scope with:
你的功能是识别全局变量,问题是只设置一次。通过在函数范围之外初始化yPos,你基本上做了什么:
var yPos = window.pageYOffset
var yPos = window.pageYOffset
is
var yPos = 0
var yPos = 0
This will never change, because you are not reassigning the value. Because yPos should be dynamic, this needs to be moved into the scope (in fact, it doesn't even need to be declared). The other variables are fine outside, because they don't change.
这永远不会改变,因为你没有重新分配价值。因为yPos应该是动态的,所以需要将其移动到范围内(事实上,甚至不需要声明它)。其他变量在外面很好,因为它们不会改变。
这是一个JSFiddle
#1
2
Your code is working fine, except that yPos is only set once at page load and will always stay 0.
您的代码工作正常,但yPos仅在页面加载时设置一次,并且始终保持为0。
To resolve this, read the scroll position each time the event handler is called, inside your yScroll function:
要解决此问题,请在每次调用事件处理程序时,在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>#2
0
snippet works: (http://codepen.io/f7o/pen/JKWKgb)
片段工作原理:(http://codepen.io/f7o/pen/JKWKgb)
yPos variable is only set on document load, and never again on scrolling
yPos变量仅在文档加载时设置,在滚动时不再设置
#3
0
Your function is recognising the global variables, the issue is the are only only set once. What you're basically doing by initialising yPos outside the function scope with:
你的功能是识别全局变量,问题是只设置一次。通过在函数范围之外初始化yPos,你基本上做了什么:
var yPos = window.pageYOffset
var yPos = window.pageYOffset
is
var yPos = 0
var yPos = 0
This will never change, because you are not reassigning the value. Because yPos should be dynamic, this needs to be moved into the scope (in fact, it doesn't even need to be declared). The other variables are fine outside, because they don't change.
这永远不会改变,因为你没有重新分配价值。因为yPos应该是动态的,所以需要将其移动到范围内(事实上,甚至不需要声明它)。其他变量在外面很好,因为它们不会改变。
这是一个JSFiddle