ScrollTop test

by infous

HTML

<div class="m">Hey!</div>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eaque necessitatibus quos nostrum quisquam ducimus blanditiis laborum quis aliquid cumque minima eum officia harum expedita deleniti magnam facere corrupti officiis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eaque necessitatibus quos nostrum quisquam ducimus blanditiis laborum quis aliquid cumque minima eum officia harum expedita deleniti magnam facere corrupti officiis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eaque necessitatibus quos nostrum quisquam ducimus blanditiis laborum quis aliquid cumque minima eum officia harum expedita deleniti magnam facere corrupti officiis.</p>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eaque necessitatibus quos nostrum quisquam ducimus blanditiis laborum quis aliquid cumque minima eum officia harum expedita deleniti magnam facere corrupti officiis.</p>

<div class="f">Footer</div>

CSS

body {
    margin: 0;
    padding: 0;
    position: relative;
}

.m {
    background: lightblue;
    color: #999;
    left: 0;
    padding: 20px;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    -webkit-transition: top .3s ease;
    -moz-transition: top .3s ease;
    -o-transition: top .3s ease;
    -ms-transition: top .3s ease;
    transition: top .3s ease;
    visibility: hidden;
}

.f {
    background: lime;
    color: #999;
    padding: 20px;
    position: relative;
}

hr {
    margin: 10px auto;
    width: 90%;
}

JavaScript

(function ($) {
    $.fn.myscroll = function (options) {
        var wnd = $(window);
        
        /* true when data is loading */
        var isLoading = false;        
        
        wnd.bind("scroll.myscroll", function () {
            /* scroll top offset */
            var wndst = wnd.scrollTop();
            
            /* element's top position */
            var et = $(options.element).offset().top;
            
            /* viewport height */
            var vh = $(wnd).height();
            
            /* load data if you scroll to the element */
            if (!isLoading && 
                    wndst + vh >= et &&
                    typeof options.loadData === "function") {
                
                /* start loading data */
                isLoading = true;
                
                /* call the callback when your data's been loaded */
                options.loadData.call(wnd, function () { 
                    /* loading stopped */
                    isLoading = false;
                });
            } 
        });
    }
})(jQuery);

(function($) {
    $(window).myscroll({
        element: $(".f"),
        loadData: function (loadingFinished) {
            var template = "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit eaque necessitatibus quos nostrum quisquam ducimus blanditiis laborum quis aliquid cumque minima eum officia harum expedita deleniti magnam facere corrupti officiis.</p>";
            $("<hr>").insertBefore(".f");
            for (var i = 0; i < 5; i++) {
                $(template).insertBefore(".f");
            }
            console.log("Loading Data!");
            loadingFinished();
        }
    });
})(jQuery);

/*$(window).scroll(function (event) {
    var st = $(this).scrollTop();
    var ft = $(".f").offset().top;
    var vh = $(this).height();
    var m = $(".m");
    
    if (st + vh >= ft) {
        loadData();
    } 
    
    console.log("scroll top + viewport height: " + (st +...