<!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>