title: Script working on Chrome but not on Firefox
body: <p>I have this fixed element to the right of the page. Here is its CSS code:</p>
  
  <pre><code>#rightSide {
    height: 100%;
    min-height: 613px;
    width: 450px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    background-color: #fafafa;
    position: fixed;
    right: 0px;
    display: block;
    float: right;
    padding: 0;
    z-index: 200;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="rightSide"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>What I want to do with this page is: when there is a window resize, the element is only fixed vertically, and it would scroll with the page horizontally. Here is the Javascript I use (resize and scroll are jQuery events):</p>
  
  <pre><code>$(window).resize(function() {
    var bod = $('body').innerWidth();
    var wid = $(this).innerWidth();
    var wind = bod - wid;
    $('#rightSide').css("right", '-'+ wind +'px');
    $(this).scroll(function () {
      var scrleft = $('body').scrollLeft();
      var scrl = scrleft - wind;
      $('#rightSide').css("right", scrl +'px');
    });
  });
  </code></pre>
  
  <p>What's weird is that this code works just fine on Chrome, but not on Firefox. Do you have any idea why this is happening?</p>
  
  <p>Thanks!</p>
  
  <p><strong>EDIT</strong> Here is the body CSS if it helps.</p>
  
  <pre><code>body {
    width : 100%;
    min-width: 1070px;
    height : 100%;
    margin : 0px auto 0px auto;
    padding : 0px 0px 0px 0px;
    display: block;
    overflow-y: auto;
    overflow-x: auto;
    min-height: 613px;
  }
  </code></pre>