How to offset window top 50%
<p><a href="http://jsfiddle.net/motocomdigital/dKDJz/6/" rel="nofollow">http://jsfiddle.net/motocomdigital/dKDJz/6/</a></p>

<p>I'm trying to fix position a div to top 50% off my window height. Which I can do fine with CSS.</p>

<p>But the original position of this 'div.slider-button' is absolute positioned further down the page. But as the page scrolls down, and when the 'div.slider-button' reaches the 50% offset top position, my <code>.fixed</code> class should be added.</p>

<p>Currently my script below, adds the <code>.fixed</code> class when my div reaches window top position.</p>

<p>I need the script to add my <code>.fixed</code> class when my 'div.slider-button' reaches 50% of the window height.</p>

<pre><code>var $window    = $(window),
    $button    = $(".slider-button"),           
    offsetbut  = $button.offset();

$window.scroll(function() {
    if ($window.scrollTop() &gt; offsetbut.top ) {
        $button.addClass('fixed');
    } else {
        $button.removeClass('fixed');
    }
});
</code></pre>

<p><br />      </p>

<pre><code>.fixed { 
    position: fixed !important;
    top: 50% !important;
}
</code></pre>

<p>See jsfiddle here <a href="http://jsfiddle.net/motocomdigital/dKDJz/6/" rel="nofollow">http://jsfiddle.net/motocomdigital/dKDJz/6/</a></p>

<p>You can see when the arrow reaches the top, it snaps to the middle, the arrow just needs to reache the middle of the window and stick.</p>
