Custom dnn skin can't detect bottom scroll but it works reversed (7.1.1)

Custom dnn skin can't detect bottom scroll but it works reversed (7.1.1)

First I thought this is JS issue but this is skin issue.
And to mention that this issue is happening to the Chome and FF but in IE
it works for some reason.

I am designing skin for the first time for DNN and it goes fine until I
find out that I have made something wrong :(.
I have created a simple skin that have on content pane. In that content
pane I added my custom module that load elements dynamically when user
scroll to the bottom of the page (I append new elements to the div).
And my module work fine on "DarkKnightSkin" but on my custom skin I think
that I have miss something so any help is welcome :)
Problem is that when I scroll to the bottom nothing happens. But when I
scroll to the top it fires action and do what it need to do. What I did
wrong here?
This is skin.ascx
<div id="wrapper">
<header>
<div id="top-bar-menu">
<div id="top-bar-menu-logo-holder">
<dnn:LOGO runat="server" ID="dnnLOGO" />
</div>
<div id="user-account-box" style="position: absolute; top:
5px; right: 5px;">
<dnn:USER runat="server" ID="dnnUSER" />
<dnn:LOGIN runat="server" ID="dnnLOGIN" />
</div>
</div>
</header>
<nav>
<div id="main-navigation-menu">
<ddr:MENU ID="MENU1" MenuStyle="Superfish" runat="server">
<ClientOptions>
<ddr:ClientString Name="speed" Value="fast" />
</ClientOptions>
</ddr:MENU>
</div>
<div class="clear"></div>
</nav>
<div id="main-content-holder">
<div runat="server" id="ContentPane"></div>
</div>
</div>
This is skin.css
body {
background:#fff;
font-family:"Trebuchet MS" Arial, Helvetica, sans-serif;
font-size:62.5%; /* Sets default font size to 10px */
color:#222222;
}
* {
margin:0;
padding:0;
}
img {
border:0;
}
p {
margin-bottom:1.75em;
}
a {
text-decoration:none;
color:#B4C835;
}
a:hover {
text-decoration:none;
color:#6CC7DC;
}
header, footer, nav, section
{
display: block;
}
.clear {
clear: both;
}
#wrapper {
background:#ffffff;
font-size:1.20em;
}
#top-bar-menu{
height: 52px;
color: #000;
width: 100%;
position: relative;
}
#user-account-box a{color:#000 !important;}
#top-bar-menu-logo-holder{
width: 150px;
}
#top-bar-menu-logo-holder img{
max-width: 50px;
}
#main-navigation-menu{
color:#000;
width:450px;
margin: auto;
position: relative;
z-index:10000;
}
nav
{
margin: 0;
width: 100%;
z-index: 9;
background-color: #ECECEC;
border-top: 1px solid #CFCACA;
}
In my module:
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() -
$(window).height() && !($('#imgLoad').is(':visible'))) {
loadMore();
}
});


UPDATE

I created a new skin.asmx and skin.css (empty file) and put only this:
<%@ Control Language="vb" AutoEventWireup="false" Explicit="True"
Inherits="DotNetNuke.UI.Skins.Skin" %>
<%@ Register TagPrefix="dnn" TagName="LOGO" Src="~/Admin/Skins/Logo.ascx" %>
<%@ Register TagPrefix="dnn" TagName="SOLPARTMENU"
Src="~/Admin/Skins/SolPartMenu.ascx" %>
<%@ Register TagPrefix="dnn" TagName="PRIVACY"
Src="~/Admin/Skins/Privacy.ascx" %>
<%@ Register TagPrefix="dnn" TagName="USER" Src="~/Admin/Skins/User.ascx" %>
<%@ Register TagPrefix="dnn" TagName="LOGIN"
Src="~/Admin/Skins/Login.ascx" %>
<div runat="server" id="ContentPane"></div>
My module still render fine but on scroll bottom doesn't work and on back
to top work (still reversed).