title: side pop out div conflict with sticky scroll
body: <p>I have a div that expands once clicked on, this also sticks to the top of the page on scroll.</p>
  
  <p>The div expands fine, however when I scroll it pushes my expanding div left.</p>
  
  <p>I am not sure why this is doing this, can anyone see the error?</p>
  
  <p>I think its to do with two variations of <code>position: absolute;</code>how ever when i have tried to fix this I have had no success.</p>
  
  <p><strong>Summer</strong></p>
  
  <p>The dive on the side should only show the red bit until clicked, once clicked it will show the rest of the div with the <code>&lt;ul&gt;</code> in.(this works until you scroll down the page) </p>
  
  <p>secondly as you scroll down the page the pop out div should stay stuck to the top of the page. This brakes at the moment as when you scroll down it stays or sticks at the top of the page, however the div expands to show all. (this should not happen) </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="da8 m-hide t-hide db-hide"&gt;
          &lt;div id="catcher"&gt;
              some random text
          &lt;/div&gt;
          &lt;div id="sticky"&gt;
              &lt;div id="slideout"&gt;
                  &lt;div id="slidecontent"&gt;
                      text pop out
                  &lt;/div&gt;
  
                  &lt;div id="clickme"&gt;
                      &lt;p&gt;my title&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS</strong></p>
  
  <pre><code>$(document).ready(function () {
      function isScrolledTo(elem) {
          var docViewTop = $(window).scrollTop(); 
          var docViewBottom = docViewTop + $(window).height();
          var elemTop = $(elem).offset().top;
          var elemBottom = elemTop + $(elem).height();
          return ((elemTop &lt;= docViewTop));
      }
  
      var catcher = $('#catcher');
      var sticky = $('#sticky');
      $(window).scroll(function () {
          if (isScrolledTo(sticky)) {
              sticky.css('position', 'fixed');
              sticky.css('top', '0px');
          }
          var stopHeight = catcher.offset().top + catcher.height();
          if (stopHeight &gt; sticky.offset().top) {
              sticky.css('position', 'absolute');
              sticky.css('top', stopHeight);
          }
      });
  });
  
  $(function () {
      $("#clickme").toggle(function () {
          $(this).parent().animate({right: '0px'}, {queue: false, duration: 500});
      }, function () {
          $(this).parent().animate({right: '-280px'}, {queue: false, duration: 500});
      });
  });
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>  body {
      overflow-x: hidden;
  }
  #slideout {
      background: #2c83c9;
      position: absolute;
      width: 280px;
      height: 146px;
      top: 11.3%;
      right:-280px;
      padding-left: 20px
  }
  
  #clickme {
      position: absolute;
      top: 0; left: 0;
      /*height: 80px;*/
      /*width: 20px;*/
  
  }
  
  #clickme p{
      transform: rotate(90deg);
      transform-origin: left top 0;
      background: #ff0000;
      width: 100%;
  }
  
  #slidecontent {
      float:left;
  }
  </code></pre>
  
  <p>this is the pop out in action </p>
  
  <p><a href="https://i.stack.imgur.com/ODbvF.png" rel="nofollow"><img src="https://i.stack.imgur.com/ODbvF.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/F8qob.png" rel="nofollow"><img src="https://i.stack.imgur.com/F8qob.png" alt="enter image description here"></a></p>
  
  <p>as you can see it pops out from the right fine, the problem happends as you scroll and the fixed div takes place </p>
  
  <p><a href="https://i.stack.imgur.com/SXFEr.png" rel="nofollow"><img src="https://i.stack.imgur.com/SXFEr.png" alt="enter image description here"></a></p>
  
  <p>on scroll it pops out to far</p>