onscroll事件揭秘

下载:http://download.csdn.net/detail/cometwo/9407895

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script>
        <title></title>
        <style type="text/css"> body, html { height: 2000px; width: 100%; margin: 0px; top: 0px; padding: 0px; left: 0px; } .class1 { width: 300px; height: 300px; background: black; position: fixed; color: red; border: 1px solid blue; font-size: 16px; margin: 10px; } </style>
        <script type="text/javascript"> $(function() { $(window).scrollTop('500'); //设置滚动条初始位置 $(window).scrollLeft('5'); window.onscroll = function() { if ($(window).scrollTop() > 600) { $('.class1').slideUp('slow'); }else { $('.class1').fadeIn(5000); } $('.class1').html('滚动条top:' + $(window).scrollTop() + '</br>' + '滚动条left:' + $(window).scrollLeft()); //$('.class1').html($('.class1').html()+'</br>滚动条top:' + $(window).scrollTop() + '</br>' + '滚动条left:' + $(window).scrollLeft()); } }) </script>
    </head>

    <body>
        <div class="class1">

        </div>

    </body>

</html>

你可能感兴趣的:(onscroll事件)