title: jquery scrolling div - calculate document height once the page is fully loaded?
body: <p>I have a scrolling sidebar div that goes downwards as the visitor scroll down the website. The problem is, it doesn't scroll all the way down and I figured out why that is.</p>
  
  <p>I assume that the script calculates the height of the document as soon as the code is loaded, but there are images on the website in different sizes that are not loaded yet once that calculation is done, including thumbnails that also change the main image to different sizes once clicked.</p>
  
  <p>If I set the height of each image, then it scrolls all the way down correctly, but it's impossible for me to know the image size that is then dynamically generated on the live website.</p>
  
  <p>Is there any way for the script to calculate the document height once all the images are loaded? Or something else that would work?</p>
  
  <p>Here is the code:</p>
  
  <pre><code>var documentHeight = 0;
  var topPadding = 15;
  $(function() {
      var offset = $("#sidebar").offset();
      documentHeight = $("#maincontainer").height();
      $(window).scroll(function() {
          var sideBarHeight = $("#sidebar").height();
          if ($(window).scrollTop() &gt; offset.top) {
              var newPosition = ($(window).scrollTop() - offset.top) + topPadding;
              var maxPosition = documentHeight - (sideBarHeight + 0);
              if (newPosition &gt; maxPosition) {
                  newPosition = maxPosition;
              }
              $("#sidebar").stop().animate({
                  marginTop: newPosition
              });
          } else {
              $("#sidebar").stop().animate({
                  marginTop: 0
              });
          };
      });
  });
  </code></pre>