在我的ASPX网页上使用脚本

Question

当我将此代码附加到我的aspx页面时，虽然脚本在JS FIDDLE [link] http://jsfiddle.net/mragansh/yWwVb/上正常工作，但脚本无效。 pl帮助我。

---------------- HTML Code :::

<div class="panel panel-one" style="background-color:white">
    <div class="panel-inner">PANEL 1</div>
</div>
<div class="panel panel-two">
    <div class="sample red">Image 1</div>
    <div class="sample green">Image 2</div>
    <div class="sample blue">Image 3</div>
    <div></div>
    <div class="panel-inner">Panel 2</div>
</div>
<div class="panel panel-three">
    <div class="panel-inner">Panel 3</div>
</div>

- CSS

html, body {
    height: 100%;
}
.sample {
    position:fixed;
}
.red {
    background:red;
    top:100px;
    width:500px;
    height:100px;
}
.green {
    background:green;
    top: 100px;
    width:500px;
    height:100px;
}
.blue {
    background:blue;
    top:100px;
    width:500px;
    height:100px;
}
.panel {
    position: relative;
    min-height: 500px;
    z-index: 1;
}
.panel-fixed {
    z-index: 1;
}
.panel-inner {
    /*padding: 1em;*/
    width: 100%;
}
.panel-fixed .panel-inner {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 3;
}
.panel-one {
    background-color: red;
}
.panel-two {
    background-color: yellow;
}
.panel-three {
    background-color: orange;
}
/* Base */
 *, *:before, *:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

- - - - 使用Javascript -----------

$(function () {
    // Set up vars
    var _window = $(window),
        panels = $('.panel'),
        panelsY = [];

    // Cache position of each panel
    $.each(panels, function (i, el) {
        panelsY.push(panels.eq(i).offset().top);
    });

    // Bind our function to window scroll
    _window.bind('scroll', function () {
        var xxxx = _window.scrollTop();
        updateWindow();
    });

    // Update the window
    function updateWindow() {
        var y = _window.scrollTop();

        // Loop through our panel positions
        for (i = 0, l = panels.length; i < l; i++) {
            /* 
                Firstly, we break if we're checking our last panel,
                otherwise we compare if he y position is in between
                two panels
            */
            if ((i === l - 1) || (y >= panelsY[i] && y <= panelsY[i + 1])) {
                break;
            }
        };

        // Update classes
        panels.not(':eq(' + i + ')').removeClass('panel-fixed');
        panels.eq(i).addClass('panel-fixed');
    };

});

// cancels any existing animations 
// and animates the "slide out" transition for all samples
function hideDivs() {
    $('.sample').stop().animate({
        left: '-2000px'
    }, 3000);
}

// slides in various samples for various scroll positions
// hides any that aren't appropriate for the current position
function showDivs() {
    hideDivs();
    var top = $(document).scrollTop();

    if (top == 0 && top <= 500) {
        hideDivs();
    } else if (top >= 500 && top < 550) {
        $('.red').stop().animate({
            'left': '0px'
        }, 1000);
        $('.green').stop().animate({
            'left': '-1000px'
        }, 2000);
        $('.blue').stop().animate({
            'left': '-1000px'
        }, 3000);

    } else if (top >= 550 && top < 600) {
        $('.red').stop().animate({
            'left': '5px'
        }, 2000);
        $('.green').stop().animate({
            'left': '0px'
        }, 2000);
        $('.blue').stop().animate({
            'left': '-100px'
        }, 3000);


    } else if (top >= 600 && top < 650) {
        $('.red').stop().animate({
            'left': '510px'
        }, 3000);
        $('.green').stop().animate({
            'left': '0px'
        }, 4000);
        $('.blue').stop().animate({
            'left': '-500px'
        }, 3000);


    } else if (top >= 600 && top < 800) {
        $('.red').stop().animate({
            'left': '530px'
        }, 3000);
        $('.green').stop().animate({
            'left': '350px'
        }, 3000);
        $('.blue').stop().animate({
            'left': '0px'
        }, 3000);


    } else if (top >= 800) {
        $('.red').stop().animate({
            'left': '530px'
        }, 3000);
        $('.green').stop().animate({
            'left': '350px'
        }, 3000);
        $('.blue').stop().animate({
            'left': '0px'
        }, 1000);


    }

}

// scroll events get fired a LOT
// this will end up being very jerky and distracting if we 
// trigger the animation every time the even fires
// So wait for a split-second before starting the animations,
// resetting the timer on each scroll event to ensure that
// the animation doesn't start until the scrolling has stopped.
var timer = null;
$(window).scroll(function () {
    clearTimeout(timer);
    timer = setTimeout(showDivs, 50);
});

当我将此代码附加到我的aspx页面时，虽然脚本在JS FIDDLE [link] http://jsfiddle.net/mragansh/yWwVb/上正常工作，但脚本无效。 pl帮助我。