为什么我的功能不识别我的全局变量?(JavaScript)

我的问题在body底部的script元素中。当您声明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>

您的代码工作正常，除了 yPos仅在PAGE LOAD 上设置一次，并且将始终保持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>

snippet works ：（ http://codepen.io/f7o/pen/jkwkgb）

yPos变量仅在文档加载上设置，而从不再次滚动

您的函数是识别全局变量，问题仅仅是设置一次。您基本上通过在功能范围之外初始初始化yPos来做什么：

var yPos = window.pageYOffset

是

var yPos = 0

这将永远不会改变，因为您没有重新分配该值。由于YPO应该是动态的，因此需要将其移至范围（实际上，甚至不需要声明）。其他变量在外面很好，因为它们不会改变。

这是一个JSFIDDLE

相关内容

最新更新

热门标签：