Jquery - ящики не анимируются в IE8 и ниже - PullRequest
Новая
       37

Jquery - ящики не анимируются в IE8 и ниже

1 голос
/ 28 ноября 2011

Я недавно включил jQuery на свой веб-сайт, чтобы анимировать два поля, в зависимости от того, как далеко вниз страницы прокручивается пользователем.

Они оба отображаются в верхней части страницы, поэтому не видны, когдастраница изначально загружается (отрицательное число сверху).

Код приведен ниже, но вы также можете увидеть здесь JSFiddle .

JavaScript

$(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 150) {
            if (!away) {
                away = true;
                $('#red-box').stop().animate({
                    'margin-top': '0px'
                }, 500);
            }
        } else {
            away = false;
            $('#red-box').stop().animate({
                'margin-top': '-30px'
            }, 150);
        }
    });
});

$(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 250) {
            if (!away) {
                away = true;
                $('#blue-box').stop().animate({
                    'margin-top': '30px'
                }, 500);
            }
        } else {
            away = false;
            $('#blue-box').stop().animate({
                'margin-top': '-200px'
            }, 150);
        }
    });
});

HTML 

<div id="red-box"></div>
<div id="blue-box"></div>

CSS 

body {
    height:2000px;
}

#red-box {
    position:fixed;
    width:100%;
    height:30px;
    margin-top:-30px;
    background-color:red;
    z-index:2;
}

#blue-box {
    position:fixed;
    width:150px;
    height:200px;
    margin-left:60px;
    margin-top:-200px;
    background-color:blue;
    z-index:1;
}

Это прекрасно работает навсе последние версии всех браузеров, но это не работает на IE8 и ниже (нет ничего удивительного).Окошки не анимируются, когда пользователь выполняет прокрутку, и поэтому никогда не появляются на экране.

Может ли кто-нибудь помочь мне заставить это работать на IE8?а возможно даже IE7?

1 Ответ

2 голосов
/ 28 ноября 2011

На самом деле, это происходит потому, что глупый IE не имеет функции прокрутки для документа объекта, вместо этого он имеет функцию прокрутки для окна объекта.

Вотобновленные функции js, которые работают для IE и других (хотя и не оптимизированы) 

    $(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 150) {
            if (!away) {
                away = true;
                $('#red-box').stop().animate({
                    'margin-top': '0px'
                }, 500);
            }
        } else {
            away = false;
            $('#red-box').stop().animate({
                'margin-top': '-30px'
            }, 150);
        }
    });
});


$(document).ready(function() {
    var away = false;

    $(document).scroll(function() {
        if ($(document).scrollTop() > 250) {
            if (!away) {
                away = true;
                $('#blue-box').stop().animate({
                    'margin-top': '30px'
                }, 500);
            }
        } else {
            away = false;
            $('#blue-box').stop().animate({
                'margin-top': '-200px'
            }, 150);
        }
    });
});

if ($.browser.msie){
$(document).ready(function() {
    var away = false;

    $(window).scroll(function() {
        if ($(document).scrollTop() > 150) {
            if (!away) {
                away = true;
                $('#red-box').stop().animate({
                    'margin-top': '0px'
                }, 500);
            }
        } else {
            away = false;
            $('#red-box').stop().animate({
                'margin-top': '-30px'
            }, 150);
        }
    });
});


$(document).ready(function() {
    var away = false;

    $(window).scroll(function() {
        if ($(document).scrollTop() > 250) {
            if (!away) {
                away = true;
                $('#blue-box').stop().animate({
                    'margin-top': '30px'
                }, 500);
            }
        } else {
            away = false;
            $('#blue-box').stop().animate({
                'margin-top': '-200px'
            }, 150);
        }
    });
  });
}

Вот ссылка на обновленный jsfiddle .

...