<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>resize_scroll</title>
<script src="js/jquery-1.12.4.min.js"></script>
<!--
需要注意的一点是,在resize和scroll方法中.
scroll可是作为window和document的方法.
但是resize只能作为window的方法.
-->
<script>
$(function(){
$(window).resize(function(){
// 当屏幕变化的时候触发
console.log( $(this).width() );
console.log( $(this).height() );
})
$(window).scroll(function(){
document.title = $(this).scrollTop()
// document.title是JavaScript原生的方法.显示在浏览器窗口的标题栏位置.
})
})
</script>
</head>
<body>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
<ul class="list">
<li>
第1个文档<br><br><br><br><br><br>
</li>
<li>
第2个文档<br><br><br><br><br><br>
</li>
<li>
第3个文档<br><br><br><br><br><br>
</li>
<li>
第4个文档<br><br><br><br><br><br>
</li>
<li>
第5个文档<br><br><br><br><br><br>
</li>
<li>
第6个文档<br><br><br><br><br><br>
</li>
<li>
第7个文档<br><br><br><br><br><br>
</li>
<li>
第8个文档<br><br><br><br><br><br>
</li>
</ul>
</body>
</html>
