Position fixed within position fixed

Child with position:fixed scrolls with parent.

HTML

<div class="page-title">
TITLE
</div>
<div class="action-alert">ALERT</div>
<div id="header">HEADER
  <div class="container">container</div>
</div>

<div class="main-content">MAIN CONTENT</div>

<div id="banner">BANNER
  <div class="container">container</div>
</div>

CSS

.page-title{
  background-color:purple;
  height:50px;
  width:100%;
}
.action-alert{
  background-color:red;
  height:50px;
  width:100%;
}
#header{
  background-color:#333;
  height:50px;
  width:100%;
  color:#fff;
}
#banner{
  background-color:lightblue;
  height:50px;
  width:100%;
}
.container{
  background-color:lightgreen;
  height:100px;
  width:100%;
}
.main-content{
    background-color:white;
  height:200px;
  width:100%;
}

JavaScript

var domWidth = $(window).width();

//Move around page elements
function moveElements() {
    var pageTitle = $('.page-title'),
        actionAlert = $('.action-alert'),
        banner = $("#banner >.container"),
        header = $("#header >.container"),
        mainContent = $(".main-content");
var domWidth = $(window).width();
    if (domWidth < 400) {
        pageTitle.prependTo(mainContent);
        actionAlert.appendTo(header);
    } else {
        pageTitle.appendTo(banner);
        actionAlert.prependTo(banner);
    } 
}

$(document).ready(function() {
    moveElements();   
    $(window).resize(function() {
        moveElements();
    });

});