A Pen by dsmy.

index.html

<div class="bg">
  <div class="bg-normal"></div>
  <div class="bg-blur"></div>
</div>

<div class="container">
  <header>
    <div class="slogan-holder"></div>
    <div class="nav-holder">
    <ul class="nav">
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Gallery</a></li>
      <li><a href="#">Contacts</a></li>
    </ul>
   </div>
  </header>

  <div class="content-wrapper">
    <div class="content">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi molestias facere molestiae hic eaque facilis architecto, dolor quidem excepturi error id unde maxime debitis, obcaecati doloremque eos, illum esse ipsam.</p>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis porro ad mollitia sed vitae amet ut eaque possimus facere, adipisci nemo placeat animi cumque dolor veniam reiciendis? Dicta, fugit, error.</p>
      
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quidem qui sequi nulla magnam esse quam hic placeat, rem reiciendis iure laboriosam blanditiis quaerat consectetur nisi, recusandae! Asperiores porro harum alias.</p>
    </div>
  </div>
</div>

Medium.com style header effect

Medium.com style header effect
------------------------------


Forked from [Chrysto](http://codepen.io/bassta/)'s Pen [Medium.com style header effect](http://codepen.io/bassta/pen/iIskw/).

Resolved issue where content section needed a fixed height to allow for random content lengths.

A [Pen](http://codepen.io/dsmy/pen/ajKdx) by [dsmy](http://codepen.io/dsmy) on [CodePen](http://codepen.io/).

[License](http://codepen.io/dsmy/pen/ajKdx/license).

script.js

$(function(){
  
  /*
  http://bassta.bg/2013/12/medium-com-like-blurred-header-effect/
  */
  
  $window = $(window);
  $body  = $("body");              
  $bgBlur = $(".bg-blur");
                
  var bgBlurHeight = $bgBlur.height();
  var scrollFlag = false;
  var scrollThreshold  = 0.25; //used to debounce pointer events 
  var blurWhenReach = 3; //blur factor, 3 means the imahe will be blurred when you scroll 1/3 of the div
                
  $window.on("scroll", function(event){
	               
	  var scrollTop = $window.scrollTop(); 
	               
	  if(!scrollFlag){
		  scrollFlag = true;
	    $body.addClass("disable-pointer-events");
	  }
	               
	  debouncePointerEvents();
	               
	  if(scrollTop < bgBlurHeight){
	    var _alpha = (scrollTop / bgBlurHeight) * blurWhenReach;
	    if(_alpha > 1){ _alpha = 1 }
		  TweenMax.set($bgBlur, {alpha: _alpha });
	  }
	               
   });
	
   // Speed up things by disabling pointer events. I use TweenMax delayedCall instead JS native setInterval just for the sake of showing how to use this method. See more at http://www.thecssninja.com/javascript/pointer-events-60fps
				
  function debouncePointerEvents(){
	  TweenMax.killDelayedCallsTo(addPointerEvents);
		TweenMax.delayedCall(scrollThreshold, addPointerEvents);
  }
				
  function addPointerEvents(){
	  scrollFlag = false;
		$body.removeClass("disable-pointer-events");
  }
				
});

style.css

body {
	font-family:Helvetica,sans-serif;
}

.bg {
	position:fixed;
	width:100%;
	height:500px;
	z-index:-100;
}

.bg > div {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center center;
}

.bg-normal {
	z-index:10;
	background-image:url(http://cloud.bassta.bg/blur/bg.jpg);
}

.bg-blur {
	z-index:20;
	background-image:url(http://cloud.bassta.bg/blur/bg-blur.jpg);
	opacity:0;
}

.container {
	z-index:2000;
}

.container header {
	position:relative;
	width:100%;
	height:500px;
}

.slogan-holder {
	position:relative;
	width:100%;
	height:440px;
}

.nav-holder {
	position:relative;
	width:100%;
	height:60px;
}

ul.nav {
	width:640px;
	height:60px;
	margin:0 auto;
	border-top:1px solid #dededc;
	list-style:none;
	text-align:center;
}

ul.nav li {
	display:inline-block;
	padding-top:16px;
	padding-right:40px;
}

ul.nav li a {
	text-decoration:none;
	color:#fff;
	font-size:18px;
}

.content-wrapper {
	/* height:2000px; */
	background-color:#fff;
  height: 100%;
}

.content {
  width: 960px;
  margin: 0 auto;
  padding: 40px 0;
}

.disable-pointer-events {
	pointer-events:none!important;
}