ウィンドウ上部をオフセットする方法50％

Question

http://jsfiddle.net/motocomdigital/dKDJz/6/

私はウィンドウの高さから50％上の位置にdivを配置しようとしています。私はCSSでうまくいくことができます。

しかし、この 'div.slider-button'の元の位置は絶対的にページの下に位置しています。しかし、ページが下にスクロールし、 'div.slider-button'が50％オフセットのトップ位置に達すると、私の.fixedクラスを追加する必要があります。

私のdivがウィンドウの一番上の位置に達すると、現在私のスクリプトは.fixedクラスを追加しています。

私の 'div.slider-button'がウィンドウの高さの50％に達したときに、.fixedクラスを追加するスクリプトが必要です。

var $window = $(window), 
    $button = $(".slider-button"),   
    offsetbut = $button.offset(); 

$window.scroll(function() { 
    if ($window.scrollTop() > offsetbut.top) { 
     $button.addClass('fixed'); 
    } else { 
     $button.removeClass('fixed'); 
    } 
}); 

.fixed { 
    position: fixed !important; 
    top: 50% !important; 
} 

矢印がトップに到達したときにあなたが見ることができますhttp://jsfiddle.net/motocomdigital/dKDJz/6/

ここjsfiddleを参照してください、それが真ん中にスナップ、矢印はちょうど窓の真ん中をreacheする必要がありますスティック。

Answer 1

それは限り窓が50％に達すると移動するなど正常に動作しているが、矢印が真ん中に達したとき、それは、ウィンドウの最上部をオフに行くとされていませんここでhttp://jsfiddle.net/dKDJz/7/

を例をご覧ください。私は-($window.height()/2)に追加して、ウィンドウのサイズを考慮し、矢印が中央に達すると消えるようにしました。あなたが大好きです。