fixing an elements position with for parallax scrolling
<p>I wanted to fix an element's position when it was scrolled down to and in view of the window. I have managed to successfully do this, but increasing the top padding when you keep scroll past the element, thus it gives the appearance that the element is fixed. However, this is very jerky:</p>

<pre><code>$(window).scroll(function(){
win_scroll = $(window).scrollTop();
pos = $('#home_services_cont').offset().top;
$('#pos').html(win_scroll);
if(win_scroll &gt; pos) {
    padding = win_scroll - pos;
    $('#home_services_cont').css('padding-top',padding)
}
}
</code></pre>

<p>Another idea I had, was to set the position as fixed, and increase the margin bottom when scrolling. As the intention is to create some animation whilst the element is fixed, and the animation will be caused by the scrolling. Once the animation is complete, the element would no longer be fixed, and the rest of the site below would be shown.</p>