title: Why does this JS not work?
body: <p>I'm trying to calculate the size of 3 elements and if they're greater than the window height, apply another class to a 4 element.</p>
  
  <p>This is what I have so far:</p>
  
  <pre><code>var limit = $(".logo").height() + $(".nav-items").height() + $(".nav-footer").height();
  var win = $(window).height();
      $(document).ready(function(checkHeight) {
          if (limit &gt; win) {
              var element = document.getElementById("sidebar-column");
              element.classList.toggle("red");
      }
  });
  </code></pre>
  
  <p>Update:</p>
  
  <p>I would like to apply the check to an existing function - I am VERY NEW to all this, thank you for your patients.</p>
  
  <pre><code>function aboutUssubNav() {
      var element = document.getElementById("about-us");
      element.classList.toggle("open");
      var element = document.getElementById("about-us-button");
      element.classList.toggle("open");
      // Check Height of Sidebar Elements to position Sidebar Footer
      var limit = $(".logo").height() + $(".nav-items").height() + $(".nav-footer").height();
      var win = $(window).height();
      if (limit &gt; win) {
           var element = document.getElementById("sidebar-column");
           element.classList.toggle("red");
      }
  }
  </code></pre>