Posted By

ryarwood on 01/30/12


Tagged

scroll navigation jquery nav sticky


Versions (?)

Who likes this?

1 person have marked this snippet as a favorite

losvivos


jQuery Sticky Nav on Scroll


 / Published in: HTML
 

  1. <div id="sticky-anchor"></div>
  2. <div id="sticky">This will stay at top of page</div>
  3.  
  4. #sticky {
  5. width: 600px;
  6. }
  7. #sticky.stick {
  8. position: fixed;
  9. top: 0;
  10. z-index: 10000;
  11. }
  12.  
  13. <script type="text/javascript">
  14.  
  15. function sticky_relocate() {
  16. var window_top = $(window).scrollTop();
  17. var div_top = $('#sticky-anchor').offset().top;
  18. if (window_top > div_top)
  19. $('#sticky').addClass('stick')
  20. else
  21. $('#sticky').removeClass('stick');
  22. }
  23. // If you have jQuery directly, use the following line, instead
  24. // $(function() {
  25. // If you have jQuery via Google AJAX Libraries
  26. google.setOnLoadCallback(function() {
  27. $(window).scroll(sticky_relocate);
  28. sticky_relocate();
  29. });
  30.  

Report this snippet  

You need to login to post a comment.