проблема с jQuery в Firefox

0

У меня проблема на моем сайте. Там механизмы на левой и правой сторонах веб-сайта, он вращается, когда вы просматриваете веб-сайт. Но по некоторым причинам он не работает в 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>
  • 1
    похоже, что он включает только -webkit-transform, вам понадобится эквивалент в moz и т. е.
  • 0
    @Travis - просто передавая "transform", jQuery заботится о префиксах
Теги:
firefox

1 ответ

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)'
       });
   });
});
Поделиться
  • 0
    Я изменил это, но теперь механизмы работают странным образом.
  • 0
    @ user3166813 - возможно, что window.scrollTop и body.scrollTop не возвращают одно и то же значение. Обычно вы располагаете тело сверху слева без полей или отступов, со 100% -ной высотой и шириной, и тогда оно должно быть таким же, но если тело расположено иначе, могут возникнуть проблемы.
Показать ещё 5 комментариев

Ещё вопросы

Сообщество Overcoder
Наверх
Меню