sticky nav when scroll

http://stackoverflow.com/questions/17117073/jquery-hide-show-based-on-scroll

by lovromar

HTML

<script src="http://stickyjs.com/jquery.sticky.js"></script>
1<br/>1<br/>1<br/>1

<div>div with image slideshow</div>
<nav>
    <div class="container">
        <div class="thirteen columns">
            <ul id="nav" class="links">
                <li id="sticker" class="hidden">
                    <img src="" alt="[image]" />
                </li>
                <li>About</li>
                <li>Contests</li>
                <li>etc.</li>
            </ul>
        </div>
    </div>
</nav>
<div>div's and the rest of the page's content</div>

2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2<br/>2

CSS

ul#nav li { display:inline-block; border:5px solid green; }
#sticker.hidden { width:0; height:0; border:0; padding:0; margin:0; }
#sticker.hidden * { display:none; }

JavaScript

$(window).load(function () {
    $('nav').sticky({
        topSpacing: 0,
        className: 'sticky',
        wrapperClassName: 'my-wrapper'
    });
    var elem = $('#sticker');
    var nav = $('nav');
    var pos = nav.css('position');
    $(window).scroll(function(){
        if (nav.css('position')!=pos) { // if changed
            if (pos=='fixed') {
                elem.addClass('hidden');
            } else {
                elem.removeClass('hidden');
            }
            pos = nav.css('position');
        }
    });
});