sticky nav when scroll2

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() {
    $('#sticker').css({'display':'none'});
    $('nav').sticky({ topSpacing:0, className: 'sticky', wrapperClassName: 'my-wrapper' });
    $(this).scroll(function() {
      if($('nav').offset().top <= $(window).scrollTop()) {
        $('#sticker').fadeIn('fast');
      } else {
        $('#sticker').css({'display':'none'});
      }
    });
  });