CodePen

HTML

            
              <p class="title top" id="1">January</p>
<p class="content">content</p>
<p class="title" id="2">February</p>
<p class="content">bunch of stuff</p>
<p class="title" id="3">March</p>
<p class="content">bunch of stuff</p>
<p class="title" id="4">April</p>
<p class="content">bunch of stuff</p>
<p class="title" id="5">May</p>
<p class="content">bunch of stuff</p>
<p class="title" id="6">June</p>
<p class="content">stuff</p>
<p class="title" id="7">July</p>
<p class="content">bunch of stuff</p>
<p class="title" id="8">August</p>
<p class="content">bunch of stuff</p>
<p class="title" id="9">September</p>
<p class="content">bunch of stuff</p>
<p class="title" id="10">October</p>
<p class="content">bunch of stuff</p>
<p class="title" id="11">November</p>
<p class="content">bunch of stuff</p>
<p class="title" id="12">December</p>
<p class="content">bunch of stuff</p>
            
          
!

CSS

            
              p, body, html{
    padding:0px;
    margin:0px
}
.title {
    width:100%;
    height:25px;
  font-size:20px;
    background-color:#aaa;
    border-bottom:1px solid #333;
    text-align:center;
    color: #333;
  font-weight:bold;
    font-family: "century Gothic", sans-serif;
    text-transform:uppercase;
  text-shadow:0px 1px 0px #ddd;
  box-shadow: 0px 1px 3px #333;
  background-image: -webkit-linear-gradient(bottom, rgb(135,135,135) 0%, rgb(232,232,232) 100%);
    
}
.title.top {
    position:fixed;
    top:0;
    left:0;
}
.title.top + .content{
    padding-top:30px;
    }
.content {
    width:96%;
    background-color:#ccc;
    height:100px;
    padding:2%}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              var currentPrior = 0;
var currentTop = 1;
var currentNext = 2;
$(window).scroll(function () {
    var position = $("#" + currentNext).offset().top - $(window).scrollTop();
    var topHeight = $("#" + currentTop).height();
    var size = topHeight + $("#" + currentTop).next().height();
    var moving = -topHeight + position + "px";
    
    if (position > topHeight){
    $("#" + currentTop).css("top","");
    }
    
    if (position < topHeight) {

        $("#" + currentTop).css("top", moving);

        if (position < 0) {
            $("#" + currentTop).removeClass("top");
            $(".content").css("top", "");
            $("#" + currentNext).addClass("top");
            currentPrior++;
            currentNext++;
            currentTop++;
        }
    }
    
    if (position > size) {
        $("#" + currentTop).removeClass("top");
        $("#" + currentPrior).addClass("top");
        currentPrior--;
        currentNext--;
        currentTop--;
    }
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................