title: Constrain Fixed Content Within a DIV
body: <p>I have a fixed position element on a page. I want that element contained within a certain div tag of an ID or Class that I assign. Here is a <a href="http://jsfiddle.net/Lynda333/44L8t/" rel="nofollow">fiddle</a> with an example. In the example the floating bar should not go above or below the black box.</p>
  
  <p>I do not mind using jQuery to change the functions, I am using v. 1.8.3.</p>
  
  <p><a href="http://photoshopland.com/downloads/photoshop-gradients/the-ultimate-gradients-pack-1/" rel="nofollow">Here as a site that shows an example</a> of what I am after. Look on the left side.</p>
  
  <p>Here is the code for the example:</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="top"&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="container"&gt;
  &lt;p&gt;Floating Bar Should not go above this point.&lt;/p&gt;
  
  &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  &lt;/div&gt;
  &lt;p&gt;Floating Bar Should not go below this point.&lt;/p&gt;
      &lt;p&gt;&amp;nbsp;&lt;/p&gt;
  
  &lt;/div&gt;
  
      &lt;div class="add-this-container" &gt;
      &lt;!-- AddThis Button BEGIN --&gt;
  &lt;div class="addthis_toolbox addthis_floating_style addthis_counter_style"&gt;
  &lt;a class="addthis_button_facebook_like" fb:like:layout="box_count"&gt;&lt;/a&gt;
  &lt;a class="addthis_button_tweet" tw:count="vertical"&gt;&lt;/a&gt;
  &lt;a class="addthis_button_google_plusone" g:plusone:size="tall"&gt;&lt;/a&gt;
  &lt;a class="addthis_counter"&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js"&gt;   &lt;/script&gt;
  &lt;!-- AddThis Button END --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>.wrapper{
      height:1500px;
      background: #808080;
      width: 300px;
  }
  .container{
      background: #111;
      height: 600px;
  }
  .top{
      height: 400px;
      background: #7e0000;
  }
  .add-this-container{
  position: absolute;
      left: 350px;
      top: 250px;
  }
  .addthis_floating_style{
      background: #ccc;
   }
  p{
      color: white;
  }
  </code></pre>