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元素，而大多数其他浏览器使用BODY元素，因此在获取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)'
       });
   });
});