<div id="header">
  <div class="center" id="headerc">
    <div class="middle">
      <h1>Sky</h1>
      <span>Fixed header and parallax scrolling background with a rhombus indicator</span>
    </div>
  </div>
</div>

<div id="pageHr"> 
  <i><i>↓</i></i>
</div>

<div id="page">
	<a href="https://commons.wikimedia.org/wiki/File:Cloud_sky_over_Brest.jpg">This Photo was taken by Luca Lorenzi</a>
</div>
@import "compass/css3";

@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url(https://fonts.googleapis.com/css?family=Lusitana);

html, body {
  height: 100%;
  padding: 0;
  margin: 0;
}
body {
  font-family: "Varela Round";
  background: #444444;
}
#header {
  background: url(https://upload.wikimedia.org/wikipedia/commons/0/06/Cloud_sky_over_Brest.jpg) no-repeat center top;
  background-size: cover;
  position: fixed;
  height: 90%;
  bottom: 10%;
  right: 0;
  left: 0;
  top: 0;
  
  .center {
    background: rgba(0,0,0,0.25);
    text-align: center;
    position: absolute;
    color: #FFFFFF;
    color: #F5F7FA;
    bottom: 0;
    right: 0;
    left: 0;
    top: 0;
    
    .middle {
      position: absolute;
      margin-top: -8em;
      right: 0;
      left: 0;
      top: 50%;

      h1 {
        font-family: "Lusitana";
        font-weight: normal;
        line-height: 1em;
        font-size: 11em;
        margin: 0;
      }
      span {
        line-height: 5em;
        font-size: 1em;
      }
    }
  }
}

$pageTopDecrease: 20px;
$hrBoxBorderLength: 40px;
$hrBgColor: #48CFAD;
$hrColor: #FFFFFF;
$hrSize: 5px;

#pageHr {
  background: $hrColor;
  position: relative;
  height: $hrSize;
  display: block;
  right: 0px;
  left: 0px;
  top: 90%;
  z-index: 1;

  > i {
    margin: -($hrBoxBorderLength/2+$hrSize);
    border: $hrSize solid $hrColor;
    height: $hrBoxBorderLength;
    width: $hrBoxBorderLength;
    background: $hrBgColor;
    position: absolute;
    display: block;
    left: 50%;
    top: 50%;
    @include transform(rotate(45deg));
    
    > i {
      font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
      line-height: $hrBoxBorderLength*0.92;
      font-size: $hrBoxBorderLength/2;
      height: $hrBoxBorderLength;
      width: $hrBoxBorderLength;
      text-align: center;
      position: absolute;
      color: $hrColor;
      display: block;
      @include transform(rotate(-45deg));
    }
  }
}

#page {
  //border-top: $pageTopDecrease solid $hrColor;
  background: #37BC9B;
  position: relative;
  //margin-top: -($pageTopDecrease);
  height: 123.45%;
  top: 90%;
	padding: 10% 40px;
	text-align: center;

	a {
		color: #fff;
	}
}
View Compiled
$(document).scroll(function() {
  var st = $(this).scrollTop();
  $("#header").css({
    "background-position-y": (-st/20)
  })
  $("#headerc").css({
    "top": (-st/5),
    "bottom": (st/5)
  })
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://code.jquery.com/jquery-1.11.1.min.js