Pastebin launched a little side project called HostCabi.net, check it out ;-)Don't like ads? PRO users don't see any ads ;-)
Guest

Creating a sticky nav css and jquery

By: lalatino on Jul 18th, 2012  |  syntax: jQuery  |  size: 2.48 KB  |  hits: 83  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <html>
  2.     <head>
  3. <title> http://stackoverflow.com/questions/11538428/creating-a-sticky-nav-css-and-jquery </title>
  4. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
  5. <script type="text/javascript">
  6.  
  7. var interval_id = false;
  8. var curOffset, oldOffset;
  9. var altmenu;
  10.  
  11. $(document).ready(function(){
  12. altmenu = $('.top-nav')[0].cloneNode(true);
  13. altmenu.style.position = 'absolute';
  14. altmenu.style.display = 'none';
  15. document.body.appendChild(altmenu);
  16. oldOffset = $(window).scrollTop();
  17. $(document).bind('scroll',function(){
  18.         if (interval_id) {
  19.                 return;
  20.         }
  21.         altmenu.style.display = 'none'; // optional
  22.         interval_id = setInterval(function() {
  23.                 curOffset = $(window).scrollTop();
  24.                 if(curOffset == oldOffset) {
  25.                         console.log('scrolling stopped',curOffset);
  26.                         clearInterval(interval_id);
  27.                         interval_id = false;
  28.                         if (curOffset>120) {
  29.                                 altmenu.style.display = 'block';
  30.                         } else {
  31.                                 altmenu.style.display = 'none';
  32.                         }
  33.                         $(altmenu).css({
  34.                                 top: (curOffset-125)+'px'
  35.                         }).animate({
  36.                                 top: (curOffset)+'px'
  37.                         }, 500);
  38.                 }
  39.                 oldOffset = curOffset;
  40.         }, 500); //setInterval
  41. });//scroll
  42. });//ready
  43.  
  44. </script>
  45.  
  46. <style type="text/css">
  47. .top-nav {position:static; width:99%; margin:0 auto;background:url(../images/elements/egg_shell.png) top left repeat;}
  48. .wrapper {width:960px;margin:0 auto;overflow:hidden;}
  49. .wrapper .brand{text-align:center;width:100%;display:block;}
  50. .wrapper .primary{ padding:38px 0 28px 0;display:inline-block; background:red; width:100% }
  51. .wrapper .primary li{display:inline;margin:0 22px 0 0;text-tra nsform:uppercase;font-size:16px;}
  52. .wrapper .primary li:last-child{margin:0 0 0 0;}
  53. .wrapper .primary li a{color:#000000;text-decoration:none;}
  54. .wrapper .primary li a:hover, .wrapper .primary li a.active{color:#f15112;}
  55. .carousel { height:611px; background:green; margin-top:50px; }
  56. .content { height:400px; background:yellow; }
  57. </style>
  58.  
  59.  
  60. </head>
  61.  
  62. <body>
  63.  
  64.  
  65.  
  66. <div class="top-nav">
  67.     <div class="wrapper">
  68.         <nav class="primary">
  69.             <ul>
  70.                 <li><a href="">Home</a></li>
  71.                 <li><a href="">About</a></li>
  72.                 <li><a href="">Blog</a></li>
  73.                 <li><a href="">Shop</a></li>
  74.                 <li><a href="">Contact</a></li>
  75.             </ul>              
  76.         </nav>                            
  77.     </div>
  78. </div>
  79. <div class="wrapper">
  80.     <div class="carousel"></div>
  81.     <div class="content">
  82.     </div>
  83. </div>
  84.  
  85.  
  86. </body>
  87. </html>