title: javascript global variable good practice
body: <p>I have a few variables pertaining to the height of elements an want to update them using <code>$(window).on('resize'[...]),</code> as well as calculate them when first loading the page so naturally I would rather make a function for doing that, instead of repeating the code.</p>
  <p>Is it bad practice to make these variables global so that I can update them with a function, or is there any other way to do this?</p>
  <pre class="lang-js prettyprint-override"><code>    var hSum = 0
      for (var i = 0; i &lt; content.length; i++) {
          var contentH = $(content[i]).height()
          hSum += contentH
      }
  
      var windowHeight = $(window).height(),
          footerHeight = footer.height(),
          heightDocument = windowHeight + hSum + footer.height() - 20;
  </code></pre>
  <p>This is the entirety of the script</p>
  <pre class="lang-js prettyprint-override"><code>function scrollFooter(scrollY, footerHeight) {
  
      if (scrollY &gt;= footerHeight) {
          $('footer').css({
              'bottom': '0px'
          });
      } else {
          $('footer').css({
              'bottom': '-' + footerHeight + 'px'
          });
      }
  }
  
  $(document).ready(function() {
      var content = $('.content'),
          header = $('header'),
          footer = $('footer'),
          headerContainer = header.find('.container'),
          headerBackground = header.find('.background'),
          nav = $('.navbar')
  
      var hSum = 0
      for (var i = 0; i &lt; content.length; i++) {
          var contentH = $(content[i]).height()
          hSum += contentH
      }
  
      var windowHeight = $(window).height(),
          footerHeight = footer.height(),
          documentHeight = windowHeight + hSum + footer.height() - 20;
  
  
      $('#scroll-animate, #scroll-animate-main').css({
          'height': documentHeight + 'px'
      })
  
      $('header').css({
          'height': windowHeight + 'px'
      })
  
      $('.wrapper-parallax').css({
          'margin-top': windowHeight + 'px'
      })
  
      scrollFooter(window.scrollY, footerHeight);
  
      setTimeout(function fadeHeaderIn() {
          headerContainer.css('opacity', '1')
          headerBackground.css('transform', 'scale(1.25, 1.25)')
      }, 300)
  
  
      $(window).on('scroll', function() {
          scroll = window.scrollY
  
          $('#scroll-animate-main').css({
              'top': '-' + scroll + 'px'
          });
  
          scrollFooter(scroll, footerHeight);
  
          nav.toggleClass('hidden', scroll &lt; windowHeight)
      })
  
      nav.on(&quot;mouseenter&quot;, function() {
          nav.removeClass('minimized')
      })
  
      nav.on(&quot;mouseleave&quot;, function() {
          nav.addClass('minimized')
      })
  
      $('.navbutton').on('click', function(event) {
          if ($(this).attr('href') == &quot;#contact&quot;)
              $('html, body').stop().animate({ scrollTop: documentHeight }, 300, 'swing')
          else $('html, body').stop().animate({ scrollTop: $($(this).attr('href')).offset().top }, 300, 'swing')
          event.preventDefault()
  
      })
  })
  </code></pre>