JQuery - 粘性侧边栏在 Firefox 中不起作用

Question

我正在开发一个带有粘性侧边栏（在某些情况下固定位置等）的网站，该侧边栏在Chrome和Safari中运行良好，但在Firefox中中断。我不确定问题是什么，因为我没有编写脚本：

        $(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 < windowTop && width > 960 && height > 450){
            $('.sticky').css({ position: 'fixed', top: 40 });
            $('#news_single').css({ left: 230 });               
          }
          else {
            $('.sticky').css('position','static');
            $('#news_single').css({ left: 0 });             
          }
        });
      }         
    });

这是网站（有问题的侧边栏是左侧带有红色标题的侧边栏）：http://www.parisgaa.org/parisgaels/this-is-a-heading-too-a-longer-one

我将不胜感激对此的任何帮助。

编辑：似乎使其一致的一件事是barlas的建议 - 向固定元素添加左属性。但是，这完全破坏了事情，因为它随后固定在x轴上，即使在调整浏览器大小等时也会保持原位。这对我不起作用，我只需要它通过添加 top 属性来坚持 y 轴。出于某种原因，这样做会导致与Chrome（它看起来应该出现的地方）和Firefox（它出现在它应该出现的地方很右的地方）不同的行为。

困惑。

已解决：好的，我已经想通了。

出于某种原因，Firefox 和 Chrome 似乎以不同的方式对待固定元素。我使结果保持一致的方法是为固定元素添加一个绝对定位的容器元素（我使用媒体查询来确保该元素仅绝对定位在 960px 以上，因为站点是响应式的）。

这使得粘性固定位置元素在两个浏览器中的行为方式相同。所以更多的是CSS问题而不是jQuery问题。

Answer 1

我编辑了我的答案，尝试定位左边的粘性元素

  $(window).scroll(function(){ // scroll event
      var windowTop = $(this).scrollTop(); // change to this here
      var width = $(window).width();
      var height = $(window).height();
      var positionEle = (width - 960 ) / 2 + 220;  // 220 is ur stick part's width
      if (stickyTop < windowTop && width > 960 && height > 450){
        $('.sticky').css({ 'position': 'fixed', 'top': '40px', 'left':positionEle + 'px' }); //try this
        $('#news_single').css({ left: 230 });      
      }
      else {
        $('.sticky').css('position','static','left':'0');
        $('#news_single').css({ left: 0 });             
      }
  });