<script>
		jQuery(window).scroll(function() {
			if (jQuery(this).scrollTop() > 260) {
			    jQuery('#fixedHeader').stop().animate({ top: '0px' }, 50);
			} else {
			    jQuery('#fixedHeader').stop().animate({ top: '-60px' }, 50);
			}
		});
		
		
		$( document ).ready(function() {
		    $( "#fixedHeader a" ).click(function() {
			  $("html, body").animate({ scrollTop: 0 }, "slow");
			  return false;
			});
		});

	</script>
	
	
	<style>
	
	#fixedHeader {
	    background-color: rgb(233,231,220);
	    position:fixed;
	    top:0;
	    width:100%;
	    z-index:100;
	    top:-60px;
	    color: #fff; 
	    opacity: 0.98;
	}
		
	#fixedHeader .container {
		padding-top: 0px;
		line-height: normal;
		padding:3px 0px;
		background: transparent;
	}
	</style>
	
	
	<div id="fixedHeader">
		<div class="wrapper">
			<div class="container">
				YOUR TITLE HERE
			</div>
		</div>
	</div>

Slides in a banner-header after some pixels of scrolling.

Show Banner on top after scroll begins

header, jquery

jQuery