Параллакс эффект или выезжающий блок

[clgs]

Есть три блока, предположим шапка, скрытый блок, контент.

Когда открывается страница показывается только шапка и контент, как только начинаем скролить, "выезжает" скрытый блок. Как только блок показался полностью, при дальнейшем скролинге, тянем остальной контент.

Собственно решил задачу по средствам JS, но не устраивает. Т.к. когда сролинг идёт колесом, то "прыгает" конент. А когда мышкой тащишь, то нормально.

Подскажите как сделать с помошью css или как-то более "грамотно"

Что сделано сейчас:

<header>...</header>
<style>
.benefits{margin-top:-300px}
.parallax_content{
	height:300px;
	margin:0 auto;
	overflow:hidden;
}
</style>
<script>
$(window).scroll(function(){
	var top = $(this).scrollTop();
	top=300-top;
	$('.benefits').css('margin-top', (0>top?0:'-'+top)+'px');
	
});
document.write('<div class="parallax_content"><img src="/file.jpg"></div>');
</script>
<div class="benefits">...</div>

В при крепленом файле более наглядно что нужно получить.

[clgs]

Проблему решил, заменив картинку на бекграунд с фиксацией, а двигаю с помошью позиции бекграунда и высоты желтого блока.