title: position fixed issue
body: <p>Hi I have a basic page setup prototype a floating basket in the pages right column.</p>
  
  <p>What happens is when the basket hits the top of the page as a user scrolls it applies a class which fixes its position to the top of the screen until the user has once again scrolled to top of screen.</p>
  
  <p>This works fine apart from one issue:</p>
  
  <p>when you resize the browser window so that the viewport is smaller than the width of the webpage and horizontal scroll to the right - if you then scroll down the page the basket fixes its position so that it overlaps the right hand side of the page!</p>
  
  <p>Code I am using is below, would apprreciate any advice. Thanks in advance!</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"&gt;
  &lt;html&gt;
   &lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"&gt;
    &lt;title&gt;Untitled Document&lt;/title&gt;
  
   &lt;style type="text/css"&gt;
    #container{width: 900px; margin-left:auto; margin-right:auto;}
    #header{height:40px; background-color:blue; }
    #column1{float:left; width:600px; background-color:green; height:900px;}
    #column2{float:left; width:300px; background-color:red; height:900px; position:relative;}
    #basket{background-color:white;  margin-left:10px; margin-right:10px; width:280px;}
    .fixed{position:fixed; top:0;}
    /*#scrollWrapper{overflow-y:scroll; overrflow-x:hidden; height:50px;}*/
    #scrollWrapper{overflow:hidden;}
   &lt;/style&gt;
   &lt;script src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js" type="text/javascript"&gt;&lt;/script&gt;
   &lt;script type="text/javascript"&gt;
    YUI().use('node', function(Y){
     var basket = Y.one('#basket');
     var basketY = basket.getY();
     var overflow = Y.one('#scrollWrapper');
  
     function constrain()
     {
      var basketHeight = basket.getComputedStyle("height").split("px")[0];
      var windowHeight = Y.one("body").get("winHeight");
      if (basketHeight &gt; windowHeight) {
       var diff = basketHeight - windowHeight;
       var scrollHeight = Y.one("#scrollWrapper").getComputedStyle("height").split("px")[0];
       var newHeight = scrollHeight - diff;
  
       overflow.setStyle("height", newHeight+"px");
  
      }
     }
  
     Y.on('scroll', function(e){
      var windowY = Y.DOM.docScrollY();
       //if(windowY &gt; basketY &amp;&amp; !basket.hasClass("fixed"))
       if(windowY &gt; basketY)
       {
        basket.addClass("fixed");
        var height = Y.one("body").get("winHeight");
        //basket.setStyle("height", height+"px");
        constrain();
  
       }
       else if(windowY &lt; basketY &amp;&amp; basket.hasClass("fixed")){
  
        basket.removeClass("fixed");
        alert("removing");
       }
  
      });
    });
  
  
  
  
  
    /*window.onload = function(){
     var basket = document.getElementById("basket");
     alert(findPos(basket));
    }
  
  
    function findPos(obj)
    {
     var curTop = 0;
     if(obj.offsetParent){
  
      do {
       curTop += obj.offsetTop;
      }
      while (obj.offsetParent);
     }
     return curTop;
    }*/
  
   &lt;/script&gt;
   &lt;/head&gt;
  
   &lt;body&gt;
    &lt;div id="container"&gt;
     &lt;div id="header"&gt;
  
      Header
     &lt;/div&gt;
     &lt;div id="column1"&gt;
  
     &lt;/div&gt;
     &lt;div id="column2"&gt;
      &lt;div id="basket" class=""&gt;
       hkjhkjkjhkjhkj
       klklkl;kl;kl
       &lt;p&gt;jhjkhkjhkj&lt;/p&gt;
       &lt;div id="scrollWrapper"&gt;
        &lt;ul&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
         &lt;li&gt;Item1&lt;/li&gt;
        &lt;/ul&gt;
       &lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;
  
    &lt;/div&gt;
  
   &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>