I am having some trouble figuring out why my script isn't working. What I want it to do is add <div id="img*VARNUMBER*"</div> to my html, when I hit the bottom of the page. I don't know what is wrong at the moment, so hopefully one of you would care to clarify :)
Thank you in advance.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Detect if User Scrolled - DevCurry.com</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function () {
var $win = $(window);
var nmb = 0;
var imgcount = 10;
$win.scroll(function () {
if ($win.scrollTop() == 0){
//detected scroll to top;
}
else if ($win.height() + $win.scrollTop() == $(document).height()) {
//detected scroll to bottom;
$('.inner').append('<div id="img'+nmb+'"></div>');
nmb = nmb+1;
//Ajax call goes here
imgcount = imgcount + 10;
}
});
});
</script>
</head>
<body>
<div id="inner">
<div>Page Top</div><br />
<div style="height:1200px"></div>
<div>Page Bottom</div>
</div>
</body>
</html>