JQuery не работает в Firefox и Internet Explorer

Question

Хорошо, у меня есть функция jQUery, которая добавляет класс к div#float, когда div#floatLunch попадает в верхнюю часть страницы. Он отлично работает в Chrome, но совсем не работает в Mozila и IE. Вот скрипка: http://jsfiddle.net/JKA7j/1/

Код

<script type="text/javascript">
$(window).scroll(function() {
    var targetDiv = $('#float');
    var matchHeight = $('#floatLunch').position().top;
    if ($(document.body).scrollTop() >= matchHeight) {
        // this is where you're css amendments would be done
        if (!targetDiv.hasClass('fixedPos')) {
            targetDiv.addClass('fixedPos');
        }
    } else {
        if (targetDiv.hasClass('fixedPos')) {
            targetDiv.removeClass('fixedPos');
        }
    }
});
</script>

Есть ли решение этой проблемы?

Answer 1

Измените: $(document.body) для $(this), что совпадает с $(window).

Вот демоверсия: http://jsfiddle.net/JKA7j/7/ (протестировано для работы с Chrome 15, IE 8,Firefox 8, Opera 11).

Answer 2

Изменить это:

$(document.body).scrollTop()

до:

$(document).scrollTop()

Кроме того, вы можете перемещать объявления matchHeight и targetDiv и размещать их вне события прокрутки, не нужно добавлять дополнительную нагрузку на сценарий, просто чтобы каждый раз находить один и тот же результат:

var targetDiv = $('#float'),
    matchHeight = $('#floatLunch').position().top;

$(window).scroll(function() {
    targetDiv.toggleClass('fixedPos', $(document).scrollTop() >= matchHeight);
});

http://jsfiddle.net/JKA7j/3/

Answer 3

Вот рабочий код: http://jsfiddle.net/JKA7j/4/

$(window).scroll(function() {
    var targetDiv = $('#float');
    var matchHeight = $('#floatLunch').offset().top;
    if ($(window).scrollTop() >= matchHeight) {
        // this is where you're css amendments would be done
        if (!targetDiv.hasClass('fixedPos')) {
            targetDiv.addClass('fixedPos');
        }
    } else {
        if (targetDiv.hasClass('fixedPos')) {
            targetDiv.removeClass('fixedPos');
        }
    }
});