title: jQuery function load or resize inconsistent
body: <p>I have a jQuery function which check whether a DOM element overflows the y-axis of the viewport, and applied a class to a different DOM element if that is the case. I want it to work on load and on resize:</p>
  <pre><code>    $.fn.overflowsViewport = function() {
          var elementTop = $(this).offset().top;
          var elementBottom = elementTop + $(this).outerHeight();
          var viewportTop = $(window).scrollTop();
          var viewportBottom = viewportTop + $(window).height();
          return elementBottom &gt; viewportBottom;
      };
  
      $(window).on('load resize', function() {
          if ($('#list .list').overflowsViewport()) {
              $(&quot;#post&quot;).addClass(&quot;shorter&quot;);
          } else {
              $(&quot;#post&quot;).removeClass(&quot;shorter&quot;);
          }
      });
  </code></pre>
  <p>This works on load, but only some of the time. Resize is fine.</p>
  <p>I presume that something is causing the function to run before the page has fully loaded on some occasions. Usually a hard refresh will create the desired effect, but we can't expect the user to know/do that.</p>
  <p>How can I make sure this function is loaded correctly so as to produce a consistent result? Or is timing not the issue here?</p>