如何偏移窗口顶部 50%答案

【问题标题】：How to offset window top 50%如何偏移窗口顶部 50%
【发布时间】：2012-03-30 05:59:45
【问题描述】：

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/

你可以看到当箭头到达顶部时，它会卡到中间，箭头只需要到达窗口中间并粘住。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

在这里查看示例http://jsfiddle.net/dKDJz/7/

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

【讨论】：

我爱你。完全有道理。谢谢