<!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());
}
})
</script>
</head>
<body>
<div class="class1">
</div>
</body>
</html>
