title: How to dynamic set top css when element over top page or bottom page?
body: <p>How to dynamic set top css when element over top page or bottom page ?</p>
  
  <p>First , mouse over first cat image. It's OK</p>
  
  <pre><code>http://image.ohozaa.com/i/480/7YpWei.jpg
  </code></pre>
  
  <p>When i scroll page to bottom and mouses first cat image again , </p>
  
  <pre><code>http://image.ohozaa.com/i/5b5/l2l3dj.jpg
  </code></pre>
  
  <p>big cat image over top page</p>
  
  <p>And When i scroll page to top and mouses 3 cat image again , </p>
  
  <pre><code>http://image.ohozaa.com/i/5db/ezZE1b.jpg
  </code></pre>
  
  <p>big cat image over bottom page</p>
  
  <p>How to change top css of mouse over effect element to not over top page or over bottom page ?</p>
  
  <p><a href="http://jsfiddle.net/L7Lyjtp7/" rel="nofollow">http://jsfiddle.net/L7Lyjtp7/</a></p>
  
  <p>index.php</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;head&gt;
  &lt;script src="http://code.jquery.com/jquery-1.10.1.min.js"&gt;&lt;/script&gt;
  
  &lt;style type="text/css"&gt;
  &lt;?PHP
      for($i=0;$i&lt;3;$i++)
      {
  ?&gt;
          .top_box&lt;?PHP echo $i; ?&gt;{
          left: 99px;
          top: 0px;
          position: absolute;
          border: 1px solid #000;
  display: none;
          }
  &lt;?PHP
      }
  ?&gt;
  &lt;/style&gt;
  
  &lt;?PHP
      for($i=0;$i&lt;3;$i++)
  {
  ?&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){    
      $("#thumbnail&lt;?PHP echo $i ; ?&gt;").hover(
          function(){
              var id = $(this).data("id");
              if(id!==undefined){
               $("#" + id).show();   
              }
              $("#top_box&lt;?PHP echo $i; ?&gt;").show(); 
  
          },function(){
              $("#top_box&lt;?PHP echo $i; ?&gt;").hide(); 
  
          });
  });
  &lt;/script&gt;
  &lt;?PHP
      }
  ?&gt;
  &lt;/head&gt;
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;
  &lt;div style=" float: left; position: relative; width: 100%; margin-bottom: 200px; " &gt;
      &lt;div id="top_box0" class="top_box0"&gt;
          &lt;img src="http://consciouscat.net/wp-content/uploads/2010/02/cat-licks-lips-200px.jpg"&gt;
      &lt;/div&gt;
      &lt;span id="thumbnail0" style=" margin: 7px; position: relative;"&gt;
          &lt;img border="0" src="http://consciouscat.net/wp-content/uploads/2010/02/cat-licks-lips-200px.jpg" width="80" height="80"/&gt;                
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div style=" float: left; position: relative; width: 100%; margin-bottom: 200px; " &gt;
      &lt;div id="top_box1" class="top_box1"&gt;
          &lt;img src="http://cat-bounce.com/cb.png"&gt;
      &lt;/div&gt;
      &lt;span id="thumbnail1" style=" margin: 7px; position: relative; "&gt;
          &lt;img border="0" src="http://cat-bounce.com/cb.png" width="80" height="80"/&gt;                  
      &lt;/span&gt;
  &lt;/div&gt;
  &lt;br&gt;
  &lt;div style=" float: left; position: relative; width: 100%; margin-bottom: 200px; " &gt;
      &lt;div id="top_box2" class="top_box2"&gt;
          &lt;img src="http://media.yopi.co.th/prod_pics/12/e/12827.jpg"&gt;
      &lt;/div&gt;
      &lt;span id="thumbnail2" style=" margin: 7px; position: relative;"&gt;
          &lt;img border="0" src="http://media.yopi.co.th/prod_pics/12/e/12827.jpg" width="80" height="80"/&gt;                  
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>