Article finished example

by b9chris

HTML

<div id=bottomMenu>You read this article. Maybe read the other stuff I'm going to put here.</div>

<p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p><p>Text</p>

CSS

#bottomMenu {
    display: none;
    position: fixed;
    left: 0; bottom: 0;
    width: 100%; height: 60px;
    border-top: 1px solid #000;
    background: #fff;
    z-index: 1;
}

body {
    font: 10pt Verdana;
}

JavaScript

(function() {
    var $win = $(window);
    
    function checkScroll() {
        if ($win.scrollTop() > 100) {
            $win.off('scroll', checkScroll);
            $('#bottomMenu').fadeIn(2000);
        }
    }
    
    $win.scroll(checkScroll);
})();