Sticky Header onscroll - like sitepoint "AwesomeBar" Ads

I’d like to enable the sticky header effect that’s being used on the sitepoint site here. I believe its on all pages, but just in case, hit this page and scroll and the bar will appear (its a teal blue ad bar for “New Relic”).

I like the way this bar appears after scroll. I’d like to achieve a similar effect with the gray header bar on my site here: http://learn.clickbump.com

I’ve currently got it as a fixed header, however, once i have the code, I’d like to change that so that it flows and only becomes sticky after the scroll event.

Any help much appreciated.

Hi Scott,

I have a simple (but basic) jquery example here.

The animation is with css so is only available in modern browsers. You can change the delay and speed in the css.

Thanks Paul! Checking it out now.

Thanks Paul, I got it working. Any ideas on how to make the transition a bit less abrupt? Perhaps fading through transparent to fully opaque?

HI Scott,

You could just add a fadeIn() with jquery and change the delay on the css animation.
e.g.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
	margin:0;
	padding:0
}
/* sticky message at top of page */
.header {
	margin:0;
	border-radius:0;
	min-height:50px;
	border-bottom:1px solid red;
	background:rgb(242,222,222);
	padding:1px;
	text-align:center;
	top:-100px;
}
.fixedElement {
	position:fixed;
	top:0;
	right:0px;
	left:0px;
	z-index:999;
	background:rgba(242,222,222, 0.9);
	margin-bottom:0;
	-webkit-box-shadow: 2px 3px 3px rgba(0, 0, 0, 0.25);
	-moz-box-shadow:    2px 3px 3px rgba(0, 0, 0, 0.25);
	box-shadow:         2px 3px 3px rgba(0, 0, 0, 0.25);
	-moz-transition:2s all 0s;
	-webkit-transition:2s all 0s;
	transition:2s all 0s;
}
</style>
</head>

<body>
<div class="header fixit">
		<h1>Testing sticky header</h1>
</div>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<p>Some text to scroll</p>
<script src="http://code.jquery.com/jquery.js"></script> 
<script type="text/javascript">
   function fixedHeaders() {
           var el = $(".fixit"),
               offset = el.offset(),
               elHeight = el.height(),
               scrollTop = $(window).scrollTop()
               if ((offset.top < scrollTop - el.height())) {
                   el.fadeOut( "slow", function() {
		   el.addClass('fixedElement').fadeIn('slow');	
																	});
               }
           if (scrollTop === 0) {
               el.removeClass('fixedElement');
           }
   }

   $(function () {
       $(window)
           .scroll(fixedHeaders)
           .trigger("scroll");
   });

</script>
</body>
</html>