1

我最近在我的网站中加入了 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？

4

1 回答 1

2

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

这是适用于 IE 和其他的更新的 js 函数（虽然没有优化）

    $(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 的链接。

于 2011-11-28T13:33:46.510 回答