title: Issue with Hide / Show Jquery on fixed positioned div
body: <p>I've got a sticky footer at the bottom of the webpage / viewpoint as well as clickable link "toggle menu" that SHOULD hide / show the menu. Problem is that I can't get the menu to hide and I've picked up that the problem lies within the CSS of the element that is supposed to hide / show. It's the fixed position {position:fixed;} ... When I remove "fixed" out, then the hide and showing of the menu works 100% but obviously the menu is no longer at the bottom of the browser. </p>
  
  <p>How can I get work this with the fixed positioning?</p>
  
  <p>Javascript to show/hide goes like:</p>
  
  <pre><code>&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" 
  type="text/javascript"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  
  $(document).ready(function(){
  
      $(".slidingDiv").show();
      $(".show_hide").show();
  
  $('.show_hide').click(function(){
  $(".slidingDiv").slideToggle();
  });
  
  });
  
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML Goes like:</p>
  
  <pre><code>&lt;div id="stick_footer_title"&gt;&lt;a class="show_hide" href="#"&gt;Toggle Menu
   &amp;#x25BC;&lt;/a&gt;&lt;/div&gt;
  &lt;div class="slidingDiv"&gt;
  &lt;div id="stickyfooter"&gt;
  
  &lt;ul id="footer_menu"&gt; 
      &lt;li class="imgmenu"&gt;&lt;a href="#"&gt;&lt;/a&gt;&lt;/li&gt;
  
      &lt;li&gt;&lt;a href="#intro"&gt;Intro&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="#photos"&gt;Photos&lt;/a&gt;&lt;/li&gt;
  
  &lt;/ul&gt;
  &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>FYI: The position:fix; css applies to the STICKYFOOTER div</p>