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

时间:2016-06-28 01:04:39

标签: javascript html css3 variables global-variables

我的问题出在script底部的body元素中。当您在pageTop函数中声明menuyPosyScroll变量时,该函数可以正常工作,但在外部声明时则不行。如果它们不属于函数并且是全局变量,那么我的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>

3 个答案:

答案 0 :(得分:2)

您的代码运行正常,但 yPos仅在页面加载时设置一次,并始终保持0

要解决此问题,请在每次调用事件处理程序时,在yScroll函数内阅读滚动位置:

&#13;
&#13;
<!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;
&#13;
&#13;

答案 1 :(得分:0)

代码段有效:(http://codepen.io/f7o/pen/JKWKgb

yPos变量仅在文档加载时设置,在滚动时不再设置

答案 2 :(得分:0)

你的函数识别全局变量,问题是只设置一次。您通过在函数范围之外初始化yPos来完成基本操作:

var yPos = window.pageYOffset

var yPos = 0

这永远不会改变,因为你没有重新分配价值。因为yPos应该是动态的,所以需要将其移动到范围内(事实上,它甚至不需要声明)。其他变量在外面很好,因为它们不会改变。

Here's a JSFiddle