title: Fixed Side Bar with appearing image
body: <p>I've got my side bar working almost as I want it, but am having issues at certain page heights:</p>
  
  <p>The side bar should work as follows:</p>
  
  <ol>
  <li><p>When the "menu" hits the top of the page, an image appears about the menu and the entire side is fixed - working!</p></li>
  <li><p>If the footer collides with the bottom of the sidebar when fixed, it starts to scroll up - working!</p></li>
  <li><p>If the window height is smaller than the sidebar height, it never fixes - not quite working.</p></li>
  </ol>
  
  <p>For point 3, there is an area of about 170 pixels between 581px and 751px (height) where the sidebar starts to jump around.  In the example, if the browser height is ~580 or less then it works fine, but if it falls into that zone it starts to become jittery.</p>
  
  <p>I've mimicked the behaviour here: </p>
  
  <p><a href="https://jsbin.com/wokupacebu/edit?html,css,js,console" rel="nofollow noreferrer">https://jsbin.com/wokupacebu/edit?html,css,js,console</a> </p>
  
  <p>doesn't quite fit the window sizes in jsbin, so to see a full screen working copy, see here: </p>
  
  <p><a href="https://output.jsbin.com/wokupacebu" rel="nofollow noreferrer">https://output.jsbin.com/wokupacebu</a></p>
  
  <p>here's my JS - the CSS and HTML can be found in the jsbin.</p>
  
  <pre><code>$(function() {
      $sideBarContainer = $("#side-bar-container");
      $sideBar = $("#side-bar");
      $sideImageContainer = $("#side-image-container");
      $sideImage = $("#side-image")
      $footer = $("#footer");
      $window = $(window);
  
      $(window).on("scroll.sidebar resize.sidebar",function() {
          setSideBarFixable();
      });
  
      function setSideBarFixable() {
      if ($window.height() &lt; $sideBar.height() + $sideImage.outerHeight()) {           
          $sideBar.removeClass("fixed");
          $sideBarContainer.css("width","auto");
          $sideImageContainer.css("height","0");
          return;
      } else {
          if ($window.scrollTop() &gt;= $sideBarContainer.position().top) {
              $sideBar.addClass("fixed");
              $sideBarContainer.css("width",$sideBar.outerWidth() + "px");
              $sideImageContainer.css("height",$sideImage.outerHeight() +  +"px");
          } else {
              $sideBar.removeClass("fixed");
              $sideBarContainer.css("width","auto");
              $sideImageContainer.css("height","0");
           }
           var diff = $footer.position().top - $window.scrollTop() - $sideBar.outerHeight();
           if (diff &lt;= 0) {
               $sideBar.css("top",diff+"px");
           } else {
               $sideBar.css("top","0");
           }
      }
  }
  </code></pre>