Parallax using jQuery in my web page

Parallax using jQuery in my web page

I need to ask question.  I am sure it is easy once I figured it out or someone on here points me in the right direction. 
 
What I am trying to do is keep the header fixed and the parallax image at a default state is as it appears when you first view the page. But here is the kicker....I need the parallax image to move behind the header as you scroll down the page and then the default of the page needs to be with the image showing. 
 
I hope I have not confused anyone if you need to ask me a question please feel free.  I am patiently waiting.
 
Here is my code below.  You can view it in your browser at http://dianamagers.com/Portfolio/index.html
 
Here is my style sheet.
**(For purposes of viewing for this question I am asking this forum)**
_________________________________________________________________________
 
<!--Source Code-->
<!DOCTYPE HTML>

<html lang="en">
<head>
<title>Diana Magers | Shaping the Internet Globally</title>

<link href="style.css" rel="stylesheet">

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
<meta charset="utf-8">
<meta name="author" content="Diana Magers">
<meta name="description" content="Welcome to the portfolio of Diana Magers. I am a Web designer and developer from Raleigh, North Carolina.">
<meta name="keywords" content="Web Design, Web Development, Logo Design, graphic design, Barbados, creative, Raleigh graphic designer, Raleigh Web Designer, Raleigh Web Developer, Raleigh's best, Diana Magers, Diana Lynn Magers">



<script  type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/scriptotoggle.js"></script>

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>
<style type="text/css">
.fadeIn .topsection .introcont .fadecontactme p a {
 color: #A2D366;
}
.fadeIn .topsection .introcont p .introtext .texthighlight {
 color: #7A9021;
}
.fadeIn .topsection .introcont .fadecontactme p a {
 color: #4C7E25;
}
</style>











<!--[if lt IE 9]>
 <script src="js/css3-mediaqueries.js"></script>
<![endif]-->


<!--[if lt IE 9]>
<script src="js/html5shiv.js"></script>
<![endif]-->

 


</head>


<body class="fadeIn">
 
 <div class="topsection">
  <div class="headerwrap" id="header">
   <div class="header">
    <a href="index.html"><img src="images/logo.png" class="logo"/></a>
    <div class="nav">
     <ul>
      <li><a href="/index.html/"><span class="activenavlink">Home</span></a></li>
      <li><a href="portfolio.html">Portfolio</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blog</a></li>
     </ul>
    </div>
   </div>
  </div>
   
  
 </div>
 
 <div class="bgsection"></div>
 <div class="midsectionwrap">
   <div class="parallaxwrapper"></div>
   <div class="midsection" id="midsection">
     <p><span class="heading">WHAT I DO?</span></p>
     <div class="boxrowone norm"> <img src="images/whatido/communicate.png"/>
       <p><span class="skillheading">COMMUNICATE</span></p>
        </div>
     <div class="boxrowtwo norm"> <img src="images/whatido/design.png"/>
       <p><span class="skillheading">DESIGN</span></p>
        </div>
     <div class="boxrowtwoand norm"> <img src="images/whatido/and.png"/> </div>
     <div class="boxrowtwo norm"> <img src="images/whatido/code.png"/>
       <p><span class="skillheading">CODE</span></p>
        </div>
     <div class="skilltext clearfix">
       <p class="clearfix">I absolutely love what I do. I always <span class="highlightedtext" style="color:#80c029">communicate</span> with my client before      I begin to work on a design. It is where I get my inspiration for before I get started on my particular <span class="highlightedtext" style="color:#80c029">design</span>. When I am not in photoshop creating something awesome, you can find me on my laptop <span class="highlightedtext" style="color:#80c029">coding</span> clean and unique websites using the latest HTML5 and CSS3 standards in the industry. </p>
        </div>
      </div>
</div>
 <div class="footer">
<p><ul>
    <li class="scoialbtns twitterbtn"><a href="https://twitter.com/diana.magers">twitter</a></li>
    <li class="scoialbtns facebookbtn"><a href="http://www.facebook.com/dlmagers">facebook</a></li>
    <li class="scoialbtns instabtn"><a href="http://instagram.com/dlmagers" target=_blank>instagram</a></li>
    <li class="scoialbtns mailbtn"><a href="#">mail</a></li>
   </ul></p>
   
  website passionately designed and developed on a laptop windows system by Diana Magers.<br>
  made in North Carolina<br>
  Diana Magers | Copyright 2013<br>
 </div>
 
 
 
<!--scripts-->
<script type="text/javascript" src="js/smoothscroll.js"></script>
<script type="text/javascript" src="js/jquery.stellar.min.js"></script>


























































<script type="text/javascript">
$.stellar()
</script>

<script>
  (function(d, t) {
    var e = d.createElement(t);
    e.src = d.location.protocol + '//www.browserawarenessday.com/widget/50f31281c49b658d2100000b';
    e.async = true;
    var n = d.getElementsByTagName(t)[0]; n.parentNode.insertBefore(e, n);
  })(document, 'script'); 
</script>
<!--end of scripts-->
 
</body>
</html>