scroll effects

by John Doe

HTML

<div class="content">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error perferendis quos vitae voluptas illum neque rerum dolorum labore, rem itaque, aut officia eius praesentium, optio quaerat similique atque. Laudantium. 
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptates perferendis maxime, itaque blanditiis quia enim asperiores inventore, deleniti reprehenderit dignissimos molestiae at minima suscipit, rem accusantium sed qui. Quis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, maxime delectus, ratione molestias eius tempore dolore placeat a ut hic quia repellat voluptatem veniam aliquid. Nulla nihil, est voluptate ducimus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error perferendis quos vitae voluptas illum neque rerum dolorum labore, rem itaque, aut officia eius praesentium, optio quaerat similique atque. Laudantium. 
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptates perferendis maxime, itaque blanditiis quia enim asperiores inventore, deleniti reprehenderit dignissimos molestiae at minima suscipit, rem accusantium sed qui. Quis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, maxime delectus, ratione molestias eius tempore dolore placeat a ut hic quia repellat voluptatem veniam aliquid. Nulla nihil, est voluptate ducimus!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi error perferendis quos vitae voluptas illum neque rerum dolorum labore, rem itaque, aut officia eius praesentium, optio quaerat similique atque. Laudantium. 
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptates perferendis maxime, itaque blanditiis quia enim asperiores inventore, deleniti reprehenderit dignissimos molestiae at minima suscipit, rem accusantium sed qui. Quis.
<br/><br/>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt, maxime...

CSS

body{
  margin: 0;
  font-size: 15px;
  font-family: arial;
}
.content{
  background-color: #0576B4;
  color: #ffffff;
  padding: 15px;
  position: relative;
  z-index: 2;
  margin-bottom: 200px;
}
.footer{
  padding: 15px;
  position: fixed;
  z-index: 1;
  bottom: 0;
  background-color:#ffffff ;
  color: #0576B4;
}
a{
  background-color: #0576B4;
  color: #ffffff;
  padding: 2px 10px;
}

JavaScript

$('a').click(function(){
	alert('click');
});