Fixed header that snaps underneath main fixed header

Question

I have been working on a problem with some other developers on this site with a fixed header problem.

I have now updated the fiddle here http://jsfiddle.net/f95sW/

The Problem

1) When scrolled down the page the yellow block needs to snap to the red block.

Please view the code and demo, any help would be much appreciated.

var offset = $(".sticky-header").offset();
var sticky = document.getElementById("sticky-header")
var additionalPixels = 50;

$(window).scroll(function () {

    if ($('body').scrollTop() > offset.top + additionalPixels) {
        $('.sticky-header').addClass('fixed');
    } else {
        $('.sticky-header').removeClass('fixed');
    }


});

Answer 1

Two issues. You didn't include a fixed class so I added that in this:

.fixed{
    position: fixed;
    top:52px;
}

jsFiddle example

But more importantly, you need to change your math to:

if ($('body').scrollTop() > offset.top - additionalPixels) {