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 建议的 - 将 left 属性添加到固定元素。但是，这完全破坏了事物，因为它随后固定在 x 轴上并且即使在调整浏览器大小等时也保持不变。这对我不起作用，我只需要通过添加它来坚持 y 轴一个顶级属性。出于某种原因，这样做会导致与 Chrome（它应该出现的位置）和 Firefox（它出现在它应该出现的位置的右​​侧很远的位置）不同的行为。

困惑。

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

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

这使得粘性固定位置元素在两种浏览器中的行为方式相同。所以更多的是 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 });             
      }
  });