title: x-scroll bar obstructing hover box
body: <p>I have a page with elements that have a hover box appear either below or above them depending on whether they fits below the page. it works fine unless the x-scroll bar is visible in which case the box can still appear below the element even if the scroll bar is obstructing the box. to demonstrate this. you can visit this <a href="http://jsfiddle.net/sC34G/" rel="nofollow">jsFiddle</a> and just slowly hover from the top to the bottom of the input, I think you'll see what I mean. It's just a small bug really, but I would like to fix it if anyone knows how. Thank you. Here's the Javascript:</p>
  
  <pre><code>$(document).mousemove(function(e) {
   leftX=(e.pageX -($('#box').width()+20)) + "px";
  
  if((e.pageY+($('#box').height() + 31)) &lt; ($(window).scrollTop() + window.innerHeight)){
     topY = (e.pageY + 20) + "px";
  }else{
     topY=e.pageY - $('#box').height() - 20 + "px";
  }
  
    $('#box').css({'top':topY,'left':leftX});
  
  });
  
  $('input').mouseout(function(){
      $('#box').hide();
  });
  
  $('input').mouseover(function(){
      $('#box').show();
  });
  </code></pre>