Question

我正在使用Sticky侧边栏（在某些条件下固定位置等）的网站上工作，这在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

我很感激任何帮助。

编辑：有一件事似乎使它保持一致，就是巴拉斯所建议的 - 在固定元素中添加一个左属性。然而，这完全破坏了它，因为它固定在x轴上，即使在浏览器调整大小等时也保持不变。这对我来说不起作用，我只需要通过添加它来坚持y轴顶级属性。出于某种原因，这样做会导致Chrome与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 });             
      }
  });

JQuery - 粘滞侧边栏不适用于Firefox

1 个答案: