Javascript 固定标题元素，直到它到达其他元素的顶部

我有一个网页，我想要一个特色的图像，背景与浏览器滚动的速度滚动。这是我的

$（窗口）。滚动（函数（）{
$（“#特色图像”）.css（“背景位置”，“50%”+（$（this.scrollTop（））+“px”）；
});

问题是现在背景会滚动，但元素保持为空，我看到了空白。我希望那个元素的大小减小。我考虑了很多解决方案，但后来我想到了让header元素的底部向下滚动，直到它通过特征图像元素并连接到content元素的顶部。问题是标题的高度和特征图像的高度是可变的。有人能给我指出解决这个问题的正确方法吗

我需要保留没有高度的特色图像元素，因为它现在可以完美地用于响应性设计

这是我的JSFIDLE，
@AGE:我认为您应该更多地使用您的实现，我的意思是：为什么您希望您的功能（滚动）单独影响特色图像，并且考虑到您的html格式，为什么不玩使其功能更像（例如）这是：所有的核心元素都以浏览器的速度滚动，而你的标题是固定的？你有你的理由，但我希望你能看到我的观点，在你的应用程序中，你的滚动功能绑定到你的HTML元素。我需要这一点，因为这将是一个移动网站，我不想要一个粘性的标题。我希望标题处于正常的文档流中。