0

我正在一个带有粘性侧边栏（在某些条件下固定位置等）的站点上工作，该站点在 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 问题。

4

1 回答 1

0

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

  $(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 });             
      }
  });
于 2012-06-25T15:07:53.107 回答