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();
        }
    });