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

これについて何か助けていただければ幸いです。

編集:一貫しているように見えることの1つは、barlasが提案したことです-固定要素に左属性を追加します。ただし、これはx軸に固定され、ブラウザのサイズが変更されてもそのままになるため、完全に壊れてしまいます。これは私にはうまくいきません。トップ属性。何らかの理由でこれを行うと、Chrome (本来あるべき場所に表示される) や Firefox (本来あるべき場所よりもはるかに右側に表示される) とは異なる動作になります。

混乱している。

解決済み:わかりました。

何らかの理由で、Firefox と Chrome では固定要素の扱いが異なるようです。結果の一貫性を保つ方法は、固定要素に絶対位置のコンテナー要素を追加することです (サイトがレスポンシブであるため、メディア クエリを使用して、この要素が 960px より上に絶対位置に配置されるようにしました)。

これにより、スティッキーな固定位置要素が両方のブラウザーで同じように動作します。つまり、jQuery の問題というよりは CSS の問題です。

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 に答える