cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <header id="header">
  <h1>Sticky Header</h1>
</header>

<article>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus dui nisi, a tincidunt nisi consequat id. Donec auctor tortor rhoncus hendrerit ornare. Suspendisse ornare, nisi vitae cursus tempor, sem nunc laoreet tellus, nec pharetra augue ipsum et turpis. Maecenas varius efficitur malesuada. In posuere, neque at convallis fringilla, lacus justo ultrices nibh, lacinia sollicitudin tortor purus id urna. Donec vehicula purus eu dapibus porta. Vivamus lacus sem, ornare eu vulputate aliquam, consectetur at arcu. Praesent et elit ligula. Pellentesque pellentesque metus quis eros varius, vitae iaculis dui egestas. Curabitur vestibulum lorem ut vestibulum ornare. Cras pharetra ex non ligula mattis pulvinar. Sed placerat ut tortor sed dapibus. Maecenas porttitor congue imperdiet.</p>

<p>Nulla facilisi. Nam efficitur ipsum non tellus tincidunt sollicitudin. Curabitur finibus dictum orci quis dignissim. Donec sagittis mi ut libero dictum imperdiet. Ut et cursus tellus. Integer leo nulla, sodales vestibulum vestibulum iaculis, pretium non nunc. Nulla at leo urna. Nulla suscipit tincidunt tellus, et tincidunt nisl auctor vel. Duis at blandit massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lacus sed sapien lacinia viverra sed vitae augue. Maecenas facilisis mattis nunc a pellentesque. Aliquam lacus sapien, accumsan quis dignissim eu, eleifend ut magna. Donec est nunc, accumsan vel viverra at, vulputate sit amet felis. Phasellus dictum tellus lorem. Aliquam posuere tincidunt mauris, nec volutpat metus egestas nec.</p>

<p>Phasellus quis auctor nisl, sit amet lacinia arcu. Morbi volutpat vitae massa ac auctor. Cras eget placerat tellus. Cras et dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin interdum lorem risus, sit amet ultrices justo consectetur a. Donec nisl est, efficitur pulvinar consequat vitae, elementum sed elit. Etiam pretium, velit in gravida egestas, lectus sapien sagittis ante, vitae laoreet nulla odio eget felis. Praesent vitae odio metus. Vestibulum id placerat libero. Sed porttitor, arcu a blandit pellentesque, risus enim lacinia ipsum, sed pellentesque ex felis sed nunc. Sed facilisis suscipit elementum. Sed at massa nec nulla interdum eleifend in sit amet turpis. Sed tincidunt malesuada justo, quis auctor nunc finibus a. Pellentesque augue nisl, bibendum et arcu at, pellentesque congue ipsum.</p>
  
  <p>Nulla facilisi. Nam efficitur ipsum non tellus tincidunt sollicitudin. Curabitur finibus dictum orci quis dignissim. Donec sagittis mi ut libero dictum imperdiet. Ut et cursus tellus. Integer leo nulla, sodales vestibulum vestibulum iaculis, pretium non nunc. Nulla at leo urna. Nulla suscipit tincidunt tellus, et tincidunt nisl auctor vel. Duis at blandit massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lacus sed sapien lacinia viverra sed vitae augue. Maecenas facilisis mattis nunc a pellentesque. Aliquam lacus sapien, accumsan quis dignissim eu, eleifend ut magna. Donec est nunc, accumsan vel viverra at, vulputate sit amet felis. Phasellus dictum tellus lorem. Aliquam posuere tincidunt mauris, nec volutpat metus egestas nec.</p>

<p>Phasellus quis auctor nisl, sit amet lacinia arcu. Morbi volutpat vitae massa ac auctor. Cras eget placerat tellus. Cras et dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin interdum lorem risus, sit amet ultrices justo consectetur a. Donec nisl est, efficitur pulvinar consequat vitae, elementum sed elit. Etiam pretium, velit in gravida egestas, lectus sapien sagittis ante, vitae laoreet nulla odio eget felis. Praesent vitae odio metus. Vestibulum id placerat libero. Sed porttitor, arcu a blandit pellentesque, risus enim lacinia ipsum, sed pellentesque ex felis sed nunc. Sed facilisis suscipit elementum. Sed at massa nec nulla interdum eleifend in sit amet turpis. Sed tincidunt malesuada justo, quis auctor nunc finibus a. Pellentesque augue nisl, bibendum et arcu at, pellentesque congue ipsum.</p>
  
  <p>Nulla facilisi. Nam efficitur ipsum non tellus tincidunt sollicitudin. Curabitur finibus dictum orci quis dignissim. Donec sagittis mi ut libero dictum imperdiet. Ut et cursus tellus. Integer leo nulla, sodales vestibulum vestibulum iaculis, pretium non nunc. Nulla at leo urna. Nulla suscipit tincidunt tellus, et tincidunt nisl auctor vel. Duis at blandit massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lacus sed sapien lacinia viverra sed vitae augue. Maecenas facilisis mattis nunc a pellentesque. Aliquam lacus sapien, accumsan quis dignissim eu, eleifend ut magna. Donec est nunc, accumsan vel viverra at, vulputate sit amet felis. Phasellus dictum tellus lorem. Aliquam posuere tincidunt mauris, nec volutpat metus egestas nec.</p>

<p>Phasellus quis auctor nisl, sit amet lacinia arcu. Morbi volutpat vitae massa ac auctor. Cras eget placerat tellus. Cras et dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin interdum lorem risus, sit amet ultrices justo consectetur a. Donec nisl est, efficitur pulvinar consequat vitae, elementum sed elit. Etiam pretium, velit in gravida egestas, lectus sapien sagittis ante, vitae laoreet nulla odio eget felis. Praesent vitae odio metus. Vestibulum id placerat libero. Sed porttitor, arcu a blandit pellentesque, risus enim lacinia ipsum, sed pellentesque ex felis sed nunc. Sed facilisis suscipit elementum. Sed at massa nec nulla interdum eleifend in sit amet turpis. Sed tincidunt malesuada justo, quis auctor nunc finibus a. Pellentesque augue nisl, bibendum et arcu at, pellentesque congue ipsum.</p>
  
  <p>Nulla facilisi. Nam efficitur ipsum non tellus tincidunt sollicitudin. Curabitur finibus dictum orci quis dignissim. Donec sagittis mi ut libero dictum imperdiet. Ut et cursus tellus. Integer leo nulla, sodales vestibulum vestibulum iaculis, pretium non nunc. Nulla at leo urna. Nulla suscipit tincidunt tellus, et tincidunt nisl auctor vel. Duis at blandit massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lacus sed sapien lacinia viverra sed vitae augue. Maecenas facilisis mattis nunc a pellentesque. Aliquam lacus sapien, accumsan quis dignissim eu, eleifend ut magna. Donec est nunc, accumsan vel viverra at, vulputate sit amet felis. Phasellus dictum tellus lorem. Aliquam posuere tincidunt mauris, nec volutpat metus egestas nec.</p>

<p>Phasellus quis auctor nisl, sit amet lacinia arcu. Morbi volutpat vitae massa ac auctor. Cras eget placerat tellus. Cras et dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin interdum lorem risus, sit amet ultrices justo consectetur a. Donec nisl est, efficitur pulvinar consequat vitae, elementum sed elit. Etiam pretium, velit in gravida egestas, lectus sapien sagittis ante, vitae laoreet nulla odio eget felis. Praesent vitae odio metus. Vestibulum id placerat libero. Sed porttitor, arcu a blandit pellentesque, risus enim lacinia ipsum, sed pellentesque ex felis sed nunc. Sed facilisis suscipit elementum. Sed at massa nec nulla interdum eleifend in sit amet turpis. Sed tincidunt malesuada justo, quis auctor nunc finibus a. Pellentesque augue nisl, bibendum et arcu at, pellentesque congue ipsum.</p>
  
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam tempus dui nisi, a tincidunt nisi consequat id. Donec auctor tortor rhoncus hendrerit ornare. Suspendisse ornare, nisi vitae cursus tempor, sem nunc laoreet tellus, nec pharetra augue ipsum et turpis. Maecenas varius efficitur malesuada. In posuere, neque at convallis fringilla, lacus justo ultrices nibh, lacinia sollicitudin tortor purus id urna. Donec vehicula purus eu dapibus porta. Vivamus lacus sem, ornare eu vulputate aliquam, consectetur at arcu. Praesent et elit ligula. Pellentesque pellentesque metus quis eros varius, vitae iaculis dui egestas. Curabitur vestibulum lorem ut vestibulum ornare. Cras pharetra ex non ligula mattis pulvinar. Sed placerat ut tortor sed dapibus. Maecenas porttitor congue imperdiet.</p>

<p>Nulla facilisi. Nam efficitur ipsum non tellus tincidunt sollicitudin. Curabitur finibus dictum orci quis dignissim. Donec sagittis mi ut libero dictum imperdiet. Ut et cursus tellus. Integer leo nulla, sodales vestibulum vestibulum iaculis, pretium non nunc. Nulla at leo urna. Nulla suscipit tincidunt tellus, et tincidunt nisl auctor vel. Duis at blandit massa. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed a lacus sed sapien lacinia viverra sed vitae augue. Maecenas facilisis mattis nunc a pellentesque. Aliquam lacus sapien, accumsan quis dignissim eu, eleifend ut magna. Donec est nunc, accumsan vel viverra at, vulputate sit amet felis. Phasellus dictum tellus lorem. Aliquam posuere tincidunt mauris, nec volutpat metus egestas nec.</p>

<p>Phasellus quis auctor nisl, sit amet lacinia arcu. Morbi volutpat vitae massa ac auctor. Cras eget placerat tellus. Cras et dui massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Proin interdum lorem risus, sit amet ultrices justo consectetur a. Donec nisl est, efficitur pulvinar consequat vitae, elementum sed elit. Etiam pretium, velit in gravida egestas, lectus sapien sagittis ante, vitae laoreet nulla odio eget felis. Praesent vitae odio metus. Vestibulum id placerat libero. Sed porttitor, arcu a blandit pellentesque, risus enim lacinia ipsum, sed pellentesque ex felis sed nunc. Sed facilisis suscipit elementum. Sed at massa nec nulla interdum eleifend in sit amet turpis. Sed tincidunt malesuada justo, quis auctor nunc finibus a. Pellentesque augue nisl, bibendum et arcu at, pellentesque congue ipsum.</p>
  
</article>
            
          
!
            
              * {
  box-sizing:border-box;
  font-family:sans-serif;
}

body {
  margin:0;
  background:#7a9f88;
  color:#FFF;
}

#header {
  background:rgba(47,85,131,.9);
  padding:25px;
  text-align:center;
  color:#FFF;
  width:100%;
}

.sticky {
  position:fixed;
  display:none;
}

article {
  padding:25px;
}
            
          
!
            
              var stickyHeader = function(){
 
  //THE POSITION OF TOP OF PAGE IN BROWSER WINDOW
  var windowTopPosition = $(window).scrollTop();
  
  //THE POSITION OF ARTICLE TOP
  var triggerContainer = $('article').offset().top;

  //THE THING THATS STICKS
  var stickyContainer = $('#header');
  
  if (windowTopPosition > triggerContainer) {    
    stickyContainer.addClass('sticky');
    stickyContainer.slideDown('fast');
    
  }else{
    stickyContainer.removeClass('sticky');
    stickyContainer.css("display","");
  }
  
  
};

$(window).scroll(stickyHeader);
            
          
!
999px
Loading ..................

Console