Jquery-框在IE8及以下版本中不设置动画

我最近在我的网站上加入了jQuery，以根据用户滚动页面的深度设置两个框的动画

它们都出现在页面顶部，因此在页面最初加载时不可见（负页边距顶部编号）

下面是代码，但您也可以看到一个

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>

这似乎在所有浏览器的最新版本上都很有效，但在IE8及以下版本上根本不起作用（这并不奇怪）。当用户滚动时，框不会产生动画，因此永远不会出现在屏幕上

---

有人能帮我把这个应用到IE8上吗？甚至可能是IE7？

事实上，这是因为愚蠢的IE在文档对象上没有滚动功能，而在窗口对象上有滚动功能

以下是适用于IE和其他应用程序的更新js函数（尽管未优化）

---

这是。

您能确保在问题中包含相关代码，并链接到JSFIDLE吗？问题应该独立于其他资源。特别是@JsFiddle的人很难长时间保持这种状态……啊，对不起，我以后一定会这么做的。谢谢你的建议。

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

    $(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);
        }
    });
  });
}