jquery - 当 div 距离页面顶部一定距离时开始动画

Question

我有一个滚动时在窗口中 float 的菜单。 目前我的菜单始终与窗口顶部保持 190 像素。 我正在使用尺寸插件，这是我的 jQuery:

$(document).ready(function() {    
menuYloc = parseInt($('#mainMenu').css('top').substring(0,$('#mainMenu').css('top').indexOf('px')))
    $(window).scroll(function () {
        var offset = menuYloc+$(document).scrollTop()+'px';
        $('#mainMenu').animate({top:offset},{duration:600,queue:false});  
    });
});

我想要实现的是，当您滚动到页面顶部时，菜单距离顶部 190px。但是，当您开始向下滚动时，菜单会随页面滚动，直到距离窗口顶部 50 像素，然后它开始 float ，始终与窗口顶部保持 50 像素，除非您向上滚动到窗口顶部页。

希望这是有道理的，如果您有解决方案，请告诉我。

Answer 1

var minDistance = 50;
var startDistance = 190;
$(window).scroll(function() {
    var scrollTop = $(document).scrollTop();
    if (scrollTop > startDistance - minDistance) {
        $('#mainMenu').css('top', scrollTop + minDistance);
    } else {
        $('#mainMenu').css('top', startDistance);
    }
});

fiddle :
http://jsfiddle.net/d52wr/