scroll top scroll hidden shown

by stackmanoz

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);
    var $bot = $('#bottomMenu');
    var shown = false;
    
    function checkScroll() {
        if ($win.scrollTop() > 100) {
            if (!shown) {
                shown = true;
                $bot.stop().fadeIn(2000);
            }
        } else {
            if (shown) {
                shown = false;
                $bot.stop().fadeOut(2000);
            }
        }
    }
    
    $win.scroll(checkScroll);
})();