Question

I’ve recently included jQuery to my website to animate two boxes, depending on how far down the page the user scrolls.

They both appear from the top of the page, so are not visible when the page initially loads up (Negative margin-top number).

The code is below, but you can also see a JSFiddle of it here.

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

This seems to work great on all latest versions of all the browsers, but it doesn’t work at all on IE8 and below (no real surprise there). The boxes do not animate when the user scrolls and so never appear on the screen.

Could anyone help me to get this to work on IE8? and possibly even IE7?

Answer 1

Actually, this is happening because stupid IE didn’t have scroll function on document object instead it has scroll function on window object.

Here is the updated js functions that works for IE and others (although not optimized)

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

Here is link to updated jsfiddle .