滚动到最底触发事件

html代码：<ul><li>数据1</li><li>数据2</li><li>数据3</li><li>数据4</li><li>数据5</li><li>数据6</li><li>数据7</li><li>数

html代码：

<ul>	<li>数据1</li>	<li>数据2</li>	<li>数据3</li>	<li>数据4</li>	<li>数据5</li>	<li>数据6</li>	<li>数据7</li>	<li>数据8</li>	<li>数据9</li>	<li>数据10</li>	<li>数据11</li>	<li>数据12</li>	<li>数据13</li>	<li>数据14</li>	<li>数据15</li>	<li>数据16</li>	<li>数据17</li>	<li>数据18</li>	<li>数据19</li>	<li>数据20</li>	<li>数据21</li>	<li>数据22</li>	<li>数据23</li>	<li>数据24</li>	<li>数据25</li>	<li>数据26</li></ul><div id="tip" style="display: none; color: #fff;">loading...</div>

创建这么多li就是为了能够滚动，没有滚动怎么触发滚动事件呢？对吧

css代码：

ul li, #tip{	background-color: #31B0D5;	margin:0 auto 10px auto;	width: 50%;	height: 30px;	line-height: 1;	font-size: 1em;	text-align: center;}

css样式没什么好说的，随便弄；

js代码：

<script type="text/javascript">$(function(){	$(window).scroll(function(){		if($(window).scrollTop() >= $(document).height()-$(window).height()){			$("#tip").show();			setTimeout(addLi,2000);		}	});	function addLi(){		$("#tip").hide();		for(var i=0;i<3;i++){			var _html = $("<li>数据"+i+"</li>");			$("ul").append(_html);		}	}});</script>

其他随意这里需要分析的是那个判断是否滚动到底的条件：

$(window).scrollTop() >= $(document).height()-$(window).height()

滚动的时候，$(window).scrollTop()=$(document).height()-$(window).height()

其实x就是$(window).scrollTop()了；当滚到底部的时候，y=0；如下图

这个时候，因为y=0；所以$(window).scrollTop()=$(document).height()-$(window).height()