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)，以便考虑窗口的大小，并在箭头到达中心时关闭。希望有道理：）

如何抵消窗口顶部50％

1 个答案: