Firefox中的jQuery問題

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元素，而大多數其他瀏覽器使用身體的元素，所以得到scrollTop時，它通常是一個好主意，只是使用窗口

變化

$body.scrollTop() 

到

$(window).scrollTop() 

編輯：

你能做到這一點

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)' 
     }); 
    }); 
});