Why is my function not recognizing my global variables? (Javascript)

Question

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.

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>

Thanks guys, I figured it was something with the yPos variable. — alex, Jun 28 '16 at 01:27

score 2 · Accepted Answer · answered Jun 28 '16 at 01:10

Your code is working fine, except that yPos is only set once at page load and will always stay 0.

To resolve this, read the scroll position each time the event handler is called, inside your 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');

    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>

score 0 · Answer 2 · answered Jun 28 '16 at 01:10

0

snippet works: (http://codepen.io/f7o/pen/JKWKgb)

yPos variable is only set on document load, and never again on scrolling

answered Jun 28 '16 at 01:10

f7o

663
4
8

score 0 · Answer 3 · answered Jun 28 '16 at 01:13

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:

var yPos = window.pageYOffset

is

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.

Here's a JSFiddle

Why is my function not recognizing my global variables? (Javascript)

3 Answers3