how do i put upper and lower limits on a fixed div that is dynamic to when a user scrolls?

i have searched everywhere and so far can't find an answer specific to what i am looking to do.

here is a website that has what i am trying to, essentially, copy: http://theeverygirl.com/feature/emily-henderson-of-secrets-of-a-stylist

do you see the contributors text area on the left? it floats with the blog post, but stops floating when it reaches the end of the blog post/footer area, and also does not appear until one scrolls down far enough on the page to view the blog post.

here is my current html/css that i would like to do this with:

<html>
<head>
<style>
   a:link{
       color: black;
   }
   a:hover{
       color: #83D3E8;
   }
   a:active{
       color: #01B1D1;
   }
p.small {line-height:70%;}
</style>
</head>
<body>
<div style="background:clear;border:1px clear;padding:5px 10px;margin: 5px; position:   fixed; left: 0%; bottom: 12%; max-width: 130px; height: 280px;opacity: 0.6;">
<h1><span style="font-family:andada,serif;">CONTRIBUTORS</span></h1>

<hr />
<p><span style="font-family:andada,serif;">PHOTOGRAPHY BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.braelynjanesmith.blogspot.com" target="_blank">braelyn jane smith</a></span> 
</p>

<p><span style="font-family:andada,serif;">STYLING BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.bluecactusstyling.com" target="_blank">joanna lynne smith</a></span></p>

<p><span style="font-family:andada,serif;">COPY BY</span></p>

<p class="small"><span style="font-family:andada,serif;"><a href="http://www.bluecactusstyling.com/about" target="_blank">joanna lynne smith</a></span>       
</p>
</div>
</body>
</html>

and you can view it live, here: http://bluecactusstyling.com/2014/06/05/test-2-2/

any tips? keep in mind that i am NOT a programmer. i've done all of this so far with google searches and html builders.

Solution

The script it is using to do that is here:

http://theeverygirl.com/sites/all/themes/everygirl/js/layout.js?n549sa

(Starts at the "// Make article left sidebars sticky" bit)

Basically, it works by calculating if you are scrolled further down the screen than the beginning of the article. If you are, it adds "position:fixed" css to the contributors area, which fixes it in a static position on the screen.