title: JQuery - Sticky sidebar not working in Firefox
body: <p>I'm working on a site with a Sticky sidebar (fixed position under certain conditions, etc) that is working fine in Chrome &amp; Safari, but breaks in Firefox. I'm not sure what the issue is since I didn't write the script:</p>
  
  <pre><code>        $(document).ready(function() {          
  
        if (!!$('.sticky').offset()) { // make sure ".sticky" element exists
  
          var stickyTop = $('.sticky').offset().top; // returns number 
          var newsTop = $('#news_single').offset().top; // returns number 
  
  
          $(window).scroll(function(){ // scroll event
  
            var windowTop = $(window).scrollTop(); // returns number 
            var width = $(window).width();
            var height = $(window).height();
  
            if (stickyTop &lt; windowTop &amp;&amp; width &gt; 960 &amp;&amp; height &gt; 450){
              $('.sticky').css({ position: 'fixed', top: 40 });
              $('#news_single').css({ left: 230 });               
            }
            else {
              $('.sticky').css('position','static');
              $('#news_single').css({ left: 0 });             
            }
  
          });
  
        }         
  
      });
  </code></pre>
  
  <p>Here's the site (the sidebar in question is the one with the red header, to the left): <a href="http://www.parisgaa.org/parisgaels/this-is-a-heading-too-a-longer-one" rel="nofollow">http://www.parisgaa.org/parisgaels/this-is-a-heading-too-a-longer-one</a></p>
  
  <p>I'd appreciate any help with this. </p>
  
  <p>EDIT: One thing that seems to make it consistent, is what barlas suggested - adding a left attribute to the fixed element. However, this breaks the thing altogether as it is then fixed on the x-axis and stays put even when the browser is resized, etc. This doesn't work for me, I simply need it to stick to the y-axis by adding a top attribute. For some reason doing this results in different behavior from Chrome (where it appears as it should) and Firefox (where it appears far to the right of where it should). </p>
  
  <p>Confused.</p>
  
  <p>RESOLVED: Okay, I've figured this out.</p>
  
  <p>For some reason, Firefox and Chrome seem to treat fixed elements differently. The way I've made the result consistent is to add an absolutely positioned container element for the fixed element (I've used media queries to ensure this element is only absolutely positioned above 960px, since the site is responsive).</p>
  
  <p>This makes the sticky fixed-position element behave the same way in both browsers. So more of a CSS problem than a jQuery one.</p>