<div id="sticky-wrap">
		<h1>testing sticky header</h1>
</div>
<p>scroll1</p>
<p>scroll2</p>
<p>scroll3</p>
<p>scroll4</p>
<p>scroll5</p>
<p>scroll6</p>
<p>scroll7</p>
<p>scroll8</p>
<p>scroll9</p>
<p>scroll0</p>
<p>scroll1</p>
<p>scroll2</p>
<p>scroll3</p>
<p>scroll4</p>
<p>scroll5</p>
<p>scroll6</p>
<p>scroll7</p>
<p>scroll8</p>
<p>scroll9</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
<p>scroll</p>
html, body {
	margin:0;
	padding:0
}

html {
  box-sizing: border-box;
}
*,
*:before,
*:after {
  box-sizing: inherit;
}

/* sticky header */
#sticky-wrap {
	top:-115px;
	background:red;
	transition:1s all ease;
}
#sticky-wrap.stickyhead {
	position: fixed;
  position:-webkit-sticky;
  position:sticky;
	top: 0;
	width: 100%;
	background: rgba(0,0,0,0.7);
	color:#fff;
	padding: 3px;
	box-shadow:0 0 10px rgba(0,0,0,0.3);
}
/* */

h1 {
	text-align:center;
	margin:0;
	padding:1em 0
}
//script to create sticky header
jQuery(function () {
  createSticky(jQuery("#sticky-wrap"));
});

function createSticky(sticky) {
  if (typeof sticky != "undefined") {
    var pos = sticky.offset().top + 150,
      win = jQuery(window);

    // scroll should really be debounced
    win.on("scroll", function () {
      if (win.scrollTop() > pos) {
        sticky.addClass("stickyhead");
      } else {
        sticky.removeClass("stickyhead");
      }
    });
  }
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js