Проблема jQuery в Firefox

Question

У меня проблема на my website. Там механизмы на левой и правой сторонах веб-сайта, он вращается, когда вы просматриваете веб-сайт. Но по некоторым причинам он не работает в Firefox, и я не знаю почему.

Код вращающихся шестерен:

<p> 
    <script type="text/javascript"> 
     jQuery(function($) { 
      var $gear1 = $('#gear1'), 
       $gear2 = $('#gear2'), 
       $gear3 = $('#gear3'), 
       $gear4 = $('#gear4'), 
       $body = $(document.body), 
       bodyHeight = $body.height(); 
      $(window).scroll(function() { 
       $gear1.css({ 
        'transform': 'rotate(' + ($body.scrollTop()/bodyHeight * 360) + 'deg)' 
       }); 
       $gear2.css({ 
        'transform': 'rotate(' + ($body.scrollTop()/bodyHeight * -360) + 'deg)' 
       }); 
       $gear3.css({ 
        'transform': 'rotate(' + ($body.scrollTop()/bodyHeight * -360) + 'deg)' 
       }); 
       $gear4.css({ 
        'transform': 'rotate(' + ($body.scrollTop()/bodyHeight * 360) + 'deg)' 
       }); 
      }); 
     }); 
    </script> 

     </p> 
    <p> 
    <style scoped="scoped" type="text/css"> 
     .gear1 { 
      width: 100px; 
      height: 100px; 
      position: fixed; 
      top:220px; 
      left:-50px; 
     } 
     .gear2 { 
      width: 100px; 
      height: 100px; 
      position: fixed; 
      top:310px; 
      left:-50px; 
     } 
     .gear3 { 
      width: 100px; 
      height: 100px; 
      position: fixed; 
      top:220px; 
      right:-50px; 
     } 
     .gear4 { 
      width: 100px; 
      height: 100px; 
      position: fixed; 
      top:310px; 
      right:-50px; 
     } 

    </style> 

    </p> 
    <div class="gear1" id="gear1"><img src="images/gear.png" alt="gear" height="100" width="100" /> 
</div> 

    <div class="gear2" id="gear2"><img src="images/gear.png" alt="gear" height="100" width="100" /> 
</div> 

    <div class="gear3" id="gear3"><img src="images/gear.png" alt="gear" height="100" width="100" /> 
</div> 

    <div class="gear4" id="gear4"><img src="images/gear.png" alt="gear" height="100" width="100" /> 
</div> 

Answer 1

Firefox использует HTML-элемент для скроллинга в то время как большинство других браузеров используют элемент BODY, поэтому при получении scrollTop это вообще хорошая идея, чтобы просто использовать окно

изменение

$body.scrollTop() 

в

$(window).scrollTop() 

EDIT:

вы могли бы сделать это

function getScrollTop(){ 
    if(typeof pageYOffset!= 'undefined'){ 
     return pageYOffset; 
    } else { 
     var B = document.body; 
     var D = document.documentElement; 
     D = (D.clientHeight)? D: B; 
     return D.scrollTop; 
    } 
} 

jQuery(function($) { 
    var $gears = $('#gear1, #gear2, #gear3, #gear4'); 

    $(window).on('scroll', function() { 
     var scrollTop = getScrollTop(); 
     $gears.css({ 
      'transform': 'rotate(' + (scrollTop/bodyHeight * 360) + 'deg)' 
     }); 
    }); 
});