I've been collaborating with fellow developers on this platform to tackle a persistent issue related to a fixed header.
Here is the updated fiddle for reference: http://jsfiddle.net/f95sW/
The Challenge
1) As you scroll down the page, the yellow block should snap to the red block.
Your insights after reviewing the code and demo would be greatly valued.
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');
}
});