如何抵消窗口顶部的50％

Question

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

我正在尝试将div的位置固定为窗高50％。 我可以用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;
}

在这里查看jsfiddle http://jsfiddle.net/motocomdigital/dKDJz/6/

您可以看到箭头到达顶部时，它会对齐到中间，箭头只需要到达窗口的中间并粘住即可。

Answer 1

在此处查看示例http://jsfiddle.net/dKDJz/7/

只要窗口达到50％，它就可以正常工作，但是它已经离开了窗口的顶部，而不是箭头到达中间时。 我添加了-($window.height()/2)以便它考虑到窗口的大小，并在箭头到达中心时关闭。 希望有道理:)